对于css，属性值的计算过程是非常核心和重要的。把这个搞定了，那其他的规则就变得很简单了。
属性值的计算过程，指的是 某个元素从所有css属性都没有值，到所有css属性都有值的过程。
比如说某个div元素，在最开始运行页面的时候，它所有的属性都没有值，然后经过一系列的运算，变成了每一个css属性都有值.
这时候也许会有疑问，当初我也是，就是一个元素的属性，不是我写哪些它就生效哪些吗，怎么会是所有呢。完全不是这样！！！👏 看一个例子：
<template>
<div>hello</div>
</template>
<style lang="scss" scoped>
div{
color: red;
}
</style>
这里只写了一个属性，难道最终只有这一个属性吗？来看看它的计算结果：
它的css属性每一个都得有值，哪怕我们只写了一个属性，它也必须要保证所有的css属性都有值。那么计算过程是怎么计算的呢？共分为四个步骤：
1.确定声明值
比如有这么一个元素，有一个类。
<div class="text">hello</div>
刚开始每一个css属性都没有值，那怎么计算呢？首先第一步，确定声明值。
- 作者样式表：我们开发者写的css。
- 浏览器默认样式表：就算什么都不写，浏览器都会默认生成一个样式表。
这些别的样式，就是浏览器默认样式表，也是用户代理样式表（user agent stylesheet）。
PS: display:block; 称为：变成块盒。像块级元素这种说法已经是10年前的说法了，现在已经没有什么块级元素，行级元素的说法了。css官方明确告诉我们不再使用这种说法了，而是说 默认生成块盒，因为浏览器默认样式表里给它加了
display:block;
这个时候它会观察两个样式表，找到没有冲突的样式作为最终的计算结果。比如作者样式表里没有写font-size，则使用浏览器默认样式表里的作为最终计算结果。另外会把我们设置的预设值转为为绝对值，比如说颜色red，会转为rbg格式。
2.层叠
层叠这部分是非常重要的，从css的全称层叠样式表中就可以看出。那它要解决什么呢？解决那些发生冲突的样式，选出最终的一种样式。如果说h1设置了字体大小，这就和浏览器默认样式表冲突了。
解决冲突会经过三个步骤：比较重要性、比较特殊性、比较源次序。
1. 比较重要性
重要性从高到低：
- 带有
important的作者样式； - 带有
important的默认样式； - 作者样式；
- 默认样式；
2. 比较特殊性
这也就是大家常说的权重了。它要计算每个冲突的样式的特殊性的值是多少。
要从style、id、属性、元素四个方面去比较。
| style | id | 属性 | 元素 |
|---|---|---|---|
| 内联：1；外联：0 | id选择器的数量 | 属性、类、伪类的数量 | 元素、伪元素的数量 |
例如：
.text {
color: red;
font-size: 40px;
}
h1 {
font-size: 26px;
}
div h1.text {
font-size: 14px;
font-size: 30px;
}
这里的font-size冲突了，那我们就来计算它的4个值。
- .test
不是内联样式，0；id选择器数量为0，0；有一个类选择器，1；没有元素选择器，0。结果是 0010。
- h1
不是内联样式，0；id选择器数量为0，0；没有类选择器，0；有一个元素选择器，1。结果是 0001。
- div h1.text
不是内联样式，0；id选择器数量为0，0；有一个类选择器，1；有两个元素选择器，1。结果是 0012。
把所有冲突的样式的特殊性的四个值算出来，然后从高位到地位进行比较。通过比较，胜出的是最后一组。
3. 比较源次序
如果还有冲突就比较源次序，就是比较源代码里面的书写顺序，哪个书写的靠后，就用哪一个。上面的字体14和30冲突了，因为30靠后，所以最终结果是它。
3.继承
继承的发生是有条件的，得满足以下两个条件。
- 目前是仍然没有值的。
- 是可以继承的。
满足这两个就ok了，那哪些是可以被继承的呢？有一个粗略的规则，就是和文字相关的是可以继承的，例如行高，字体大小，字体颜色。和文字不相关的是不可以继承的，例如宽高、位置。 如果要详细知道，那就去MDN查看该属性的具体信息。
4.使用默认值
那么多的css属性，我们书写的时候也没写那么多，不冲突就用我们写的；冲突了就根据层叠规则来。还没写的，比如text-align，就继承了。那还剩很多，比如background-color这种怎么办，那这时候就使用它的默认值了。同理，默认值可以查看MDN，这里以 background-color为例
经过了这四个步骤，保证每个元素的css属性都有值。在这四个步骤当中，继承和使用默认值是动不了的，我们写的代码只能影响到确定声明值与层叠。
来看一个小例子：
<div class="box">
<p>这时一句话</p>
<a href="">这时一个链接</a>
</div>
给box设置了颜色：
<style>
.box {
color: pink;
}
</style>
p元素的颜色是对了，但a元素并没有。我们没有对a进行操作，所以要么是继承要么使用默认值，打开浏览器就会发现a元素有默认值。而对于p，没有默认值，所以继承了父元素。、
原文链接：https://juejin.cn/post/7359077619747061814 作者：初出茅庐的
