前置知识
你需要知道，每一个 HTML 元素，都拥有所有的 CSS 属性，并且属性值大多为默认值。
比如，一个div元素：
问题：div 元素，为什么是一个块级元素？
由下图，我们可知，div 元素是一个块级元素，本质上是因为，在Chrome浏览器源码中的浏览器默认样式表中，将 div 设置为 display：block。当然，仅仅是改变display的值并不能改变其语义。
在 Computed，计算后的样式中，我们可以看到，浏览器默认 display 值，代替了 display 属性本身的默认值。
我们将 display 设置为 inline，可以看到：
我们自己写的样式display: inline顶替掉了浏览器默认样式display: block
以上，就是我们这篇文章要讨论的，Computed 中的这些 CSS 属性的值，都是怎么计算出来的。
属性值的计算过程
1. 确定声明值
对于没有冲突的 CSS 样式声明，我们直接使用其值，作为 Computed 计算后的值。
如上图中的font-size是有冲突的。
color: red; display: block; font-weight: bold;这 3 个是没有冲突的。
此时，h1 元素的 CSS 属性值如下图所示：
2. 层叠冲突处理（权重计算）
对于有冲突的声明使用层叠规则，确定最终的 CSS 属性值
关于这一部分内容，我在上一篇文章⭐CSS基础之层叠冲突处理 - 掘金 (juejin.cn)中做了详细介绍，想深入了解的同学可以去看看，下面只做简单的流程介绍。
由上可知，font-size这个属性发生了层叠冲突，冲突处理规则如下：
1. 比较源（CSS样式表来源）的重要性
作者样式表 > 浏览器默认样式表，因此去掉font-size: 2em;
2. 比较特殊性（选择器优先级）
有关 h1 元素的 3 个不同选择器的优先级（由高到底）：
div h1.red：0 1 2.red：0 1 0h1：0 0 1
3. 比较书写顺序
后面覆盖前面
font-size: 30px; 最终胜出！
到这里，层叠冲突处理完毕，目前 h1 元素的 CSS 属性值如下：
3. 使用继承
经过前 2 步计算后，仍然没有值的属性，如果可以继承，则继承父元素的值
4. 使用默认值
经过前 3 步计算后，仍然没有值的属性，使用默认值。
background-color默认值为transparent
到这里，CSS 属性值的计算就完了，剩下的所有没有值的属性，全部使用默认值。
思考题
a 元素中的内容显示什么颜色？
html
<style>
div {
color: red;
}
</style>
<div>
<a href="">asdasdasd</a>
</div>答案是：蓝色。
为什么不是红色？
因为 a 元素有浏览器默认样式
color: -webkit-link，因此，在第 3 步 使用继承时，a 元素的 color 已经有值了，不需要继承了。
补充：4个特殊的CSS属性值
inherit：手动（强制）继承，将父元素的值取出应用到该元素initial：将该属性设置为默认值revert：将该属性设置为浏览器默认样式值unset：当该属性可以继承时，等价于 inherit，否则等价于 initial