1.css 属性值计算过程

某个元素从所有CSS属性没有值，到所有CSS属性都有值的过程
1.确定声明值
2.层叠
3.继承
4.使用默认值

1.确定声明值

样式表总共有两类：作者样式表（自己写的样式）和浏览器样式表

```html
<h1 class="text"></h1>
```
作者样式表

浏览器样式表

找到**没有冲突**的样式直接作为计算后的样式。另外会把预设值比如res设置为计算后的rgb值。

2.层叠

有冲突的样式才需要层叠，经过下面三个步骤确定样式值
1.比较重要性
重要性从高到低：

    1.带有important的作者样式
    2.有important的默认样式
    3.作者样式
    4.默认样式

2.比较特殊性
对每个样式分别计数

style	id	属性	元素
内联1：否则0	id选择器的数量	属性、类、伪类的数量	元素、伪元素的数量

<h1 class="text"></h1>

作者样式

.red {

color: red;

font-size: 40px;

}

h1 {

font-size: 26px;

}

div h1.red {

font-size: 3em;

font-size: 30px;

}

浏览器默认样式

h1 {

display: block;

font-size: 2em;

font-weight: bold;

}

以font-size属性为例：

.red类的值是0010

h1的值是0001

div h1.red的值是0012

把值算出来之后呢，先比较高位（左位），高位相同必须往地位比较。比较之后应该用div h1.red里的属性值

vscode里会直接显示出来值

3.比较源次序

源代码中靠后的覆盖靠前的。

上面div h1.red里font-size还是有冲突，根据源代码中靠后的覆盖靠前的规则，所以最后的font-size是30px

3.继承

对仍然没有值的属性若可以继承则使用继承

继承需要满足两个条件，1。没有值2.属性可以继承

跟文字相关的属性是可以继承的，如行高文字大小。

非文字相关的比如宽高位置这些事不可以继承的。具体的可以参考官方文档

4.使用默认值

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

经过四个步骤保证每个元素都有属性值

第3，4步骤用户不能修改，可以通过修改第1，2步骤影响第3，4步骤。

比如直接声明了值，就不会发生继承了。也不会使用默认值。

inherit是把父元素的样式赋值粘贴到属性上。和第3步的继承没有关系