18、CSS基础——属性值的计算过程

属性值的计算过程

1. 页面渲染

浏览器的页面渲染方式：
一个元素一个元素依次渲染，顺序按照页面的树形目录结构进行

即页面按照这种树形目录结构自根发散对元素依次进行渲染，元素一定是上一个渲染完后才渲染下一个元素，不会同时渲染多个元素。

渲染每个元素的前提条件：该元素的所有CSS属性必须有值。

2. 属性值的计算过程

一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做CSS属性值计算过程。

具体步骤：

1.确定声明值：参考样式表（作者样式表+浏览器默认样式表）中没有冲突的声明，作为CSS属性值；
2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值；
3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值；
4.使用默认值：对仍然没有值的属性，使用默认值。

例子：对于a元素的color属性，浏览器的默认样式表中是有值的，所以不会继承父元素的颜色属性值。若想使该属性发生继承，则可以使用inherit强制继承，只不过此强制继承发生在层叠冲突那一步。

一些不能继承父元素的属性，可以使用inherit来强制该属性继承父元素的属性值

color: inherit;

特殊的两个CSS取值：

• inherit: 手动（强制）继承，将父元素的值取出应用到该元素；

• initial: 初始值，将该属性设置为默认值。