样式优先级、盒子塌陷、伪类和伪元素、行内元素的margin和padding、max-width和max-width之间的覆盖规则、浏览器如何解析CSS选择器
样式优先级、盒子塌陷、伪类和伪元素、行内元素的margin和padding、max-width和max-width之间的覆盖规则、浏览器如何解析CSS选择器
1、样式优先级
样式类型：
- 行内样式
-
<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>
-
- 内联样式
-
<style type="text/css"> h1{font-size:12px; color:#000; } </style>
-
- 外部样式
-
<link rel="stylesheet" href="css/style.css">
-
选择器类型：
- ID选择器
- class选择器
- 标签选择器
- 通用选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
- 子选择器、相邻选择器
权重计算规则：
- 第一等：代表行内样式，如: style=””，权值为1000。
- 第二等：代表ID选择器，如：#content，权值为0100。
- 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
- 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 继承的样式没有权值
比较规则：
- 选择器都有一个权值，权值越大越优先
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置
- 继承的 CSS 样式不如后来指定的 CSS 样式。通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。
- 在同一组属性设置中标有!important规则的优先级最大
2、盒子塌陷
盒子塌陷是什么？
- 本该在父盒子内部的元素跑到了外部
盒子塌陷的几种解决方法？
- 1.直接将盒子大小写死，缺点是非自适应。
- 2.给外部的父盒子也添加浮动，也让其脱离标准流，缺点是不易维护
- 3.给父元素添加overflow，让其变成BFC，但是auto会出现滚动条，影响美观。hidden会带来内容不可见的问题。
- 4.父盒子最下方，引入清除浮动块
- <br style="clear:both" />
- 很多人都是这么解决的，但是缺点是引入了不必要的冗余元素
- 5.用after伪元素清除浮动
- 给外部盒子的after伪元素设置clear属性，再隐藏它。
- 这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用此方法来解决CSS盒子塌陷。缺点是低版本IE不兼容。
-
.clearfix {*zoom: 1;} .clearfix:before,.clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after {clear: both;}
3、CSS伪类和伪元素的区别
伪类：
其核心是用来选择DOM树之外的信息，不能够被普通选择器选择的文档之外的元素。比如:hover、:active、:visited、:link、:first-child、:focus、:lang等
伪元素：
DOM树没有定义的虚拟元素，核心是需要创建通常不存在于文档中的元素，伪元素控制的内容和元素是没有差别的，但它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。用于将特殊的效果添加到某些选择器。
区别：
- 伪类和伪元素都是用来表示文档树之外的元素
- 伪类和伪元素分别用单冒号和双冒号来表示
- 伪类和伪元素都不出现在源文件和DOM树中
- 伪类其实就是基于普通DOM元素而产生的不同的状态，他是DOM元素的某一特征
- 伪元素能够创建在DOM树上不存在的抽象对象，而且这些抽象对象是能够访问到的
4、行内元素的margin和padding
- 水平方向上都有效
- 垂直方向上都无效（padding-top和padding-bottom会显示出效果，但是高度不会被撑开，不会对周围元素有影响）
5、min-width/max-width和min-height/max-height之间的覆盖规则
- max-width会覆盖width，即使width是行内样式或者设置了!important
- min-width会覆盖max-width，此规则发生在min-width和max-width冲突的时候
6、浏览器是怎么样解析CSS选择器的？
CSS选择器的解析是从右向左解析的。如果从左向右匹配的话，发现不符合规则，需要进行回溯，会损失很多性能。
若从右向左解析，先找到所有的最右节点，对于每一个节点，向上寻找父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差别很大，是因为从右向左从第一步就筛选掉了大量不符合条件的最右节点。
而从左向右的匹配规则性能都浪费在了失败的查找上面。
CSS解析完毕之后，需要将解析的结果和DOM Tree的内容一起进行分离建立一棵Render Tree，最终用来进行绘图。
在建立Render Tree的过程中，浏览器就需要为每一个DOM Tree中的元素根据CSS的解析结果来确定生成怎么样的Render Tree。
