CSS（四）——属性值的计算过程

CSS（四）——属性值的计算过程

本节课特别重要，涉及前端CSS样式的底层运行

一个元素一个元素以此渲染，顺序按照页面文档的树形目录结构进行

元素的渲染过程

1. 首先渲染html；

2. 渲染head元素；

3. 渲染meta元素；

4. 渲染title元素；

5. 渲染body元素；

6. 渲染h3元素；

7. 渲染p元素；

8. 渲染strong元素；

9. 渲染a元素；

10. 渲染img元素。

    遵循先序遍历方式

【注】：该图片并非个人原创，是在B站上找到的免费公益课的资源，且未用作盈利目的。

渲染每一个元素的前提条件

该元素的所有CSS属性必须有值。一个元素从所有属性都没有值，到酥油的属性都幼稚，这个计算过程，叫做属性值计算过程。

属性值计算过程简介

无属性值

1. 确定声明值：

   参考样式表中没有冲突的声明，作为CSS属性值。

2. 层叠冲突：

   对样式表中有冲突的声明使用层叠规则，确定CSS属性

3. 使用继承：

   对仍让没有值得属性，若可以继承，则继承父元素的值

4. 使用默认值

   最后对没有值得属性，使用默认值

每个属性都有值

强制继承

强制继承是将默写元素的样式属性值设为 inherit ，在这种情况下属性的继承会发生在第一步或者第二步，具体在哪一步取决于是否需要解决层叠冲突。——不能自动继承的属性也可以通过这个关键字进行强制继承

两个特殊的CSS属性值：

1. inherit：表示强制继承；
2. initial：表示将该属性设置为默认值。