css属性值的计算过程-浏览器对于元素css样式的渲染过程（CS

文: jack同学

应知：每个标签元素都要设置很多样式才能显示在页面，这么多样式对应着一张样式列表，只有这个样式列表中的属性都有值这个元素才能显示在页面，这是前提。这个列表到底有哪些呢？详情可以参考谷歌浏览器的开发者工具或者官方文档

第二，浏览器读取页面html结构的顺序符合深度优先原则，如：先读html -> 再读head -> 再读meta/title/link...读完head里面所有的标签 -> 再读body里面的标签。而不是横向的读取结构

1. 首先浏览器渲染样式刚开始时，每个元素没有设置样式

2. 浏览器会计算元素css属性的声明值。声明值有哪些？

   • 声明值包含：自己设置的css属性（如：color:red;），浏览器默认声明的css属性值（如常见a标签默认样式 text-decration: underline;）
   • 如果正好自己设置的跟该元素浏览器默认样式冲突了，或者前面设置的跟后面设置的同一个属性冲突了咋办？那么就要解决冲突，见第三步。

3. 第三步，浏览器会解决冲突(也叫层叠冲突)

   • 自己设置的属性跟自己设置的属性冲突
     • 比较权重（讨论权重的文章很多，不详细解释）
     • 比较顺序（权重相同，后面的覆盖前面的）
   • 自己设置的属性跟浏览器默认属性冲突
     • 从逻辑上来说，自己设置的样式肯定想要覆盖系统的样式，所以浏览器也是这样做的，自己设置的属性值重要性更高于默认属性值。

4. 第四步，浏览器会计算继承属性值

   • 前面的步骤使元素都设置了一些样式，那么这步浏览器会查看父级中是否还能够继承一些没有设置的属性值，如果有就继承过来，没有可继承的怎么办？先空着，再进行第五步。

   • 继承性：每个属性都存在是否可以继承的可能，要了解哪些属性可以继承，可以参考官方文档，一般来说字体类的属性可以继承

   • 注意计算继承过程是在计算声明值和解决层叠冲突之后，这就是为什么有些属性值在某些元素中不能继承的原因所在了。比如说常见的a标签颜色属性值继承问题（父级设置颜色，a标签颜色不改变，就是因为先计算了声明值也就是浏览器有默认样式，那么这个属性就存在值了不会进行继承）

5. 第五步，设置默认值

   • 对于样式列表中还没有设置计算的属性，则给默认值
   • 常见的元素默认值如：很多元素的width值为auto，背景颜色为transparent。详情见谷歌浏览器开发者工具/官方文档

6. 最后，所有属性值都设置了，元素显示。