一、伪类和伪元素伪类和伪元素都是用来修饰不在文档树中的部分，区别在于，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。而伪元素则用于创建一些不在文档树中的元素，并为其添加样式(如:before/:after)。 二、常用伪类伪类用法兼容:link未访问的链接主流浏览器都支持:visited已访问的链接主流浏览器都支持:hover鼠标划过链接主流浏览器都支持:active 已选中...
今天参加了一个Code Review活动，看了一个同事的写的代码，感觉满足了当前的功能实现，但是从长远来看，无论从代码复用角度还是维护上看都显得非常差。先看看需求是什么吧。需求是通过下拉框的选择不同的选项，来显示和隐藏一个文本框。同事是这样写的：Code 1<select name="select" onChange="disinput(this)"><option value="1">1</option><option value="2">2</option></select> <input type="text" id="text" name="text" sty...
方法一 思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中优点：父元素（parent）可以动态的改变高度（table元素的特性）缺点：IE8以下不支持 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>未知宽高元素水平垂直居中</title> </head> <style>.parent1{display: table;height:300px;width: 300px;background-color: #FD0C70; } .parent1 .child{...
CSS 轮廓（outline）轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。轮廓（outline）实例 在元素周围画线 本例演示使用outline属性在元素周围画一条线。 设置轮廓的样式 本例演示如何设置轮廓的样式。 设置轮廓的颜色 本例演示如何设置轮廓的颜色。 设置轮廓的宽度 本例演示如何设置轮廓的宽度。CSS 轮廓（outline）轮廓（outline）是绘...
最近在面试，不停地收到了知识冲击，尤其是对于一些基础的css、html、js问题居多，所以自我也在做反思，今天就css问题，如何让一个子元素div块元素上下左右居中 (以下总结方法，都已得到验证)。 情景一：一个浏览器页面中，只有一个div模块，让其上下左右居中 解决方案： { position:fixed; left:0; right:0; top:0; ...
CSS选择器是构建CSS的基础.在为大型,复杂嵌套的(x)HTML文档进行样式定义时,很有可能会遇上针对相同元素在不同结构下的重复定义的问题,这个问题也是前端开发人员相对头痛的问题.在这种情况 (针对相同元素在不同结构下的重复定义) 发生的前提下,浏览器在渲染页面文件时,会按照一定规则进行优先级排列,然后根据这个优先级权重对发生状况的元素进行处理.而这个浏览器遵循的规则是什么呢?让我们来看一段简单的HTML代码:<body id="conten...
一、display（元素显示模式） display属性用来设置元素的显示方式。如果display设置为none，float及position属性定义将生效。 语法：display: block | none | inline | inline-block 1)block：块对象值的是元素显示为一个方块，默认显示状态下将占据整行，其它元素只能另起一行显示。（块元素） 2)inline：行间对象与block刚好相反，它允许其它元素在同一行显示。（内联元素） 3)inline-block：指定对象...
CSS3中 animation 和 transition 俩样式都能创建动画效果，而且是后台C++执行的，所以效率比普通jQuery的js模拟动画的效率高很多，所以建议大家能用css实现的效果都用css。transition的使用比较简单，这里就不介绍了，着重为大家介绍下 animation 。animation 的css属性有很多，本文通过 animation-name 来控制启动动画和转换动画，以下是一个通过 animation 来控制元素的显示和隐藏的例子（仅支持webkit）：<!doctype html> <html...
置换元素：1. 一个内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。 2. 置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按...
CSS3 Flexbox轻松实现元素的水平居中和垂直居中网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Flex布局。 元素居中，相信作为前端工程师的你肯定会经常用到，不管是在水平方向居中，还是垂直方向居中，都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中，还是比较麻...
伪类基于当前元素所处的状态或具有的特性，用于设置元素自身的特殊效果。a：link 规定所有未被点击的链接；a：visited 匹配多有已被点击过的链接；a：active 匹配所有鼠标按下未松开的元素；a：hover 匹配所有鼠标移入/悬停在元素上的元素；：focus 被选中的元素；：first-child 元素的第一个子元素；：lang允许创作者来定义指定元素中使用的语言； 伪类的规定：由于css的优先级问题，下面四个伪类需要按顺序书写，否则会出现...
一、方法说明通过IDomObject元素，获取完整的CSS选择器，过滤HTML和BODY元素，自动将class、id添加到选择器上，优先添加class，无class再添加id。如:<html><head></head><body><div id="result"><h3 class="t"><a "="" href="http://www.baidu.com/link?url=PgEyrxusTKZjg64DFOd_qlTy4o7dXLH_26WOy1mg6JUwVE4L_KrH24eG7s49yN8R-iBqQEb80m2gLmAzab8FIK&ck=4276.4.1526360648567.0.0.250.568.0&shh=www.baidu.com&sht=ba...
常见的块级元素和行内元素一、块级元素 1、块级元素的特点：（1）、默认显示在父标签的左上角.（2）、块级元素默认占满一行（沾满整个文档流）。2、常见的块级元素：<p>、<h1-h6>、<ulli>、<olli>、<div>、<tabl>、<hr>二、行内元素（内联元素） 1、行内元素的特点：（1）、大小受到文字区域的影响，不受到width和height的影响。（2）、行内元素不会单独占满一行。2、常见的行内元素：<a>、<pan> 、<img> 、<input>三、块级元素...
CSS 中父级元素的高度一般由子元素撑开，不会特意设置高度，但是以下情况会造成父级元素高度坍塌，也就是高度为零，影响后面元素的排版。子元素使用绝对定位子元素浮动针对第一种情况，即子元素使用绝对定位，可以使用以下方案：子元素的绝对定位改为相对定位，如果可以改的话针对第二种情况，即由子元素浮动造成父元素坍塌，可以使用以下方案：/*父级元素绝对定位*/position: absolute/*父级元素添加*/overflow: hidden;/*伪元素清...
以下先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline。 解决的方法： 在IE里： document.styleSheets[0].rules[0].style.display = "inline"; 在firefox里： document.styleSheets[0].cssRules[0].style.display = "inline"; 讨论： 能够做一个函数来搜索特定名字的style对象：...