样式优先级、盒子塌陷、伪类和伪元素、行内元素的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。