2016-3-17 记录

渲染引擎

1. 渲染引擎： Gecko(firefox),WebKit(Chrome,Safari,Opera),浏览器内核指的就是渲染引擎
2. Css选择器： （#/./*/tag）
   选择器的最后一个部分是关键选择器
3. 渲染从关键选择器开始匹配，向父元素查找。
   所以用空规则或者标签，是低效的。

高效的选择器

1. 尽可能短的选择器
2. 避免使用通用选择器（*），节省匹配次数
3. 不用任何类别选择器限制ID
4. 尽量不给Class加限定，限制对应class的应用情况，增加匹配次数
5. 使用具体的Class类别，可以减少匹配次数
6. 少使用后代选择级，即减少层级 .class1 .class2 .class1 .class2 ...
7. 利用继承
8. 移除空规则/无效的选择器， .xxx div{} xxx无效

总结： 让渲染引擎最快最少的去找到对应的选择器

CSS权重

1. 继承： 0,0,0,0
2. 元素： 0,0,0,1
3. 类： 0,0,1,0
4. ID： 0,1,0,0
5. 行内元素： 1,0,0,0
6. !important: 最高级别
   以上是在不同量级的

style标签块与link

两者没有优先级问题，根据浏览器执行顺序，来覆盖样式

@import

1. 需要放在最前面的位置
2. import引入的样式，优先级低于当前css样式中
3. @import的文件需要在引用它的文件下载解析完之后，才下载另一个，然后开始渲染
4. IEbug:超过31条后@import文件不解析
   如果；页面中仅使用style标签@import外部文件，会出现无内容闪烁，head里加入link或script标签可以解决
5. 当使用合并压缩工具时，推荐@import！这样有利于模块化和分层设计

堆叠上下文

1. 默认平级，按执行顺序来覆盖
2. position脱离文档流，在上面
3. 当一个定位的元素，并设置了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>
4. z-index只能作用在定位元素上
5. 当添加opacity小于1时，会影响层级。
   但是。。如果添加定位属性，又会忽略opacity的影响

IE兼容性的问题：

1. white-space: nowrap;让文字不换行
2. margin-top:10px; 属性前加“”,这个只有IE6/IE7才能识别。
3. IE下使用！important:{margin-top:20px !important; margin-top:0px;}