当我们在页面上看见一个元素显示的时候，并附上了丰富的CSS样式，其实这背后经历了一系列复杂的属性计算过程，而最终页面上所呈现的样式则是最终计算的结果，可能并不是我们所编写的样式，这样一来就会在一些场景中造成一些诡异的现象，比如我编写的样式和最终的呈现样式不一致。这一切问题，我都将在本文给大家讲述其背后的原因。
其实当我们的元素在页面呈现后，浏览器会为我们的元素加上已有的所有CSS属性,并为其赋值，是的，你没有听错，所有已知的css属性最终都会被添加在元素的最终样式上，如下图（部分）
而所有的CSS属性值，最终所呈现的样式，则需要经历一个属性值的计算过程，从而得到最终的呈现样式。而从无任何属性样式，到最终的每个属性都有对应的值，这一过程，就叫做 CSS属性值的计算过程。
1. 确定声明值
在这一步骤环节中，浏览器首先会拿到
我们编写的作者样式表来和浏览器的默认样式表进行筛选，把浏览器默认样式表中和作者样式表没有冲突的css属性值，直接当做最终的样式。然后结束第一步计算。
2. 层叠冲突
在第二部环节中主要对样式表有冲突的声明使用层叠规则，确定CSS属性值，其中体现为三步：1.
比较重要性，2.比较特殊性，3.比较源次序
- 比较重要性
在这一步浏览器会
无条件认为作者样式表比自己的默认样式表优先级高这一步保留下作者样式表的样式。
- 比较特殊性
经过上一轮的对比过后，现在保留下来的作者样式表中，就要开始对比
选择器权重等级了，最终保留下权重等级高的属性值。
- 比较源次序
这一步的主要作用是，解决相同权重等级的属性值，当
属性值权重相同时，后来者居上，后面的样式覆盖前面的样式，至此，整个第二部计算过程，才算是真正的结束。
3. 使用继承
在此步骤中，对
仍然没有值的属性，若可以继承，则继承父元素的值
4. 使用默认值
这一步是整个属性值计算过程的最后一步，在这一步当中：对
仍然没有值的属性，则使用默认值
以上就是一个元素在页面上展示背后的
CSS属性值计算的整个过程。对那些使用了默认值的属性值，最终依然会应用在元素上，这就是开头说的，虽然一个元素看起来很简单，但其实所有的已知CSS属性值都将应用在了它的身上。而这样的计算流程会为每一个元素计算一次，这得益于计算机强大的计算能力，才使得我们无感，了解了背后的计算原理，也可以为之后CSS的性能优化做一个切口。
拓展：CSS可以为任何属性添加以下关键字
🚵♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————
