CSS-属性值的计算过程

由图中我们可以看到，一个自定义不书写任何样式的p元素在样式计算过后都会产生很多的样式值，这是因为 浏览器渲染每个元素的前提条件是，该元素的所有CSS属性必须有值

那么一个元素的属性值从无到有经历了哪些过程呢？

属性值计算的4个步骤

一、确定声明值

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

假设我们需要设置一个元素的CSS属性值，一开始所有属性值都为空，经历步骤一的计算就可以确定下来部分属性的值

二、层叠冲突

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

经过步骤二后确定出 font-size 等属性的值

三、使用继承

对仍然没有值且可以继承的属性，则继承父元素的值

即使是根元素浏览器都会有默认的样式表，所以说如果一个元素经历步骤一和步骤二后某个属性仍然没有值，则会依次向上去继承父元素中的属性值，当然 并不是所有的属性都可以继承 ，详情的规则可以参照MDN的官方文档。

四、使用默认值

对仍然没有值的属性，使用默认值

以 width 属性为例，默认值可以在MDN官方文档中查询到。所有的属性值都有自己的默认值。

所以经历以上四个步骤后，该元素的所有CSS属性的值都会计算完毕

---

看一个经典的面试题

先明确一点就是color属性是可以被继承的

面试题：下图中a标签中文字的颜色是什么？

如果你对于a标签为什么没有不是红色有疑问的话，可以继续往下看

通过浏览器调试工具我们可以看到，a标签在浏览器的默认样式表（用户代理样式表）表中存在color属性，所以计算的过程中，第一步就已经确定了a标签的color属性值了

而p标签在浏览器的默认样式表（用户代理样式表）表中不存在color属性，则会在走到第三步时从父元素div中继承color的属性值

所以这也是为什么p标签中文字颜色是红色而a标签不是