日期:2014-05-17  浏览次数:20631 次

css高效性
高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找。
1 不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。
2 不要再class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写
3 尽量少使用层级关系
一般写法:#divBox p .red{color:red;}
更好写法:.red{..}
4 使用class代替层级关系
一般写法:#divBox ul li a{display:block;}
更好写法:.block{display:block;}


IE在与FF负值的z-index的区别:
ie下给body元素默认了一个绝对定位属性(position: absolute)z-index其值无限小。
FF下body和html (被定义了样式属性时) 元素默认了一个绝对定位属性(position: absolute)不过他们的z-index是0。当body的z-index值为负的时候,body内的元素z-index值再大也不会冲破他的束缚,如果body外的元素(html)定义了样式属性时,body也不会冲破这个元素的束缚。

IE与Firefox对于当子块高度超过父块时的不同处理:
IE会自动扩大Content的高度,保持子元素margin-bottom的空间以及父元素自身的padding-bottom。
而Firefox会保证父元素的height高度,此时子元素将超过父块的范围。

IE与Firefox的边框与背景范围区别:
给元素设置background-color属性时,IE作用的区域为 Content+padding;而Firefox则是 Content+padding+border。


http://www.jb51.net/css/41452.html