渲染引擎
- 渲染引擎： Gecko(firefox),WebKit(Chrome,Safari,Opera),浏览器内核指的就是渲染引擎
- Css选择器： （#/./*/tag）
选择器的最后一个部分是关键选择器 - 渲染从关键选择器开始匹配，向父元素查找。
所以用空规则或者标签，是低效的。
高效的选择器
- 尽可能短的选择器
- 避免使用通用选择器（*），节省匹配次数
- 不用任何类别选择器限制ID
- 尽量不给Class加限定，限制对应class的应用情况，增加匹配次数
- 使用具体的Class类别，可以减少匹配次数
- 少使用后代选择级，即减少层级 .class1 .class2 .class1 .class2 ...
- 利用继承
- 移除空规则/无效的选择器， .xxx div{} xxx无效
总结： 让渲染引擎最快最少的去找到对应的选择器
CSS权重
- 继承： 0,0,0,0
- 元素： 0,0,0,1
- 类： 0,0,1,0
- ID： 0,1,0,0
- 行内元素： 1,0,0,0
- !important: 最高级别
以上是在不同量级的
style标签块与link
两者没有优先级问题，根据浏览器执行顺序，来覆盖样式
@import
- 需要放在最前面的位置
- import引入的样式，优先级低于当前css样式中
- @import的文件需要在引用它的文件下载解析完之后，才下载另一个，然后开始渲染
- IEbug:超过31条后@import文件不解析
如果；页面中仅使用style标签@import外部文件，会出现无内容闪烁，head里加入link或script标签可以解决 - 当使用合并压缩工具时，推荐@import！这样有利于模块化和分层设计
堆叠上下文
- 默认平级，按执行顺序来覆盖
- position脱离文档流，在上面
- 当一个定位的元素，并设置了z-index值，那么就形成一个局部堆叠上下文，即a下的元素一直局限在a中。当b的层次比a高时，a-child层次再高，也不能覆盖b。
<pre>
<div class="a">1
<div class="a-child">1-1</div>
</div>
<div class="b">2</div>
</pre> - z-index只能作用在定位元素上
- 当添加opacity小于1时，会影响层级。
但是。。如果添加定位属性，又会忽略opacity的影响
IE兼容性的问题：
- white-space: nowrap;让文字不换行
- margin-top:10px; 属性前加“”,这个只有IE6/IE7才能识别。
- IE下使用！important:{margin-top:20px !important; margin-top:0px;}
网友评论