CSS学习（7）CSS属性计算过程前言 CSS属性计算过程的怎样的 CSS属性计算过程首先我们应该知道，浏览器在处理样

前言

首先我们应该知道，浏览器在处理样式的时候会给元素的每一个CSS属性都设置值，接下来我们要讨论属性值的计算逻辑。

CSS属性值的计算方法会按照下面的顺序进行：

当我们在样式表中对某一个元素书写样式声明时，这个声明就会被当作CSS的属性值。

例如：

<h1>test</h1>

在上面的代码中，我们没有书写任何的CSS样式，所以这个时候就采用浏览器的默认样式。

// ......
font-size: 32px;
font-weight: 700;
// ......

现在我们为这个h1设置一个样式：

font-size: 20px;

这就是我们的作者样式，当作者样式和浏览器默认样式中的声明值有冲突时，会优先把作者样式中的声明值当作CSS的属性值。

而font-weight并没有和作者样式冲突，所以不受影响。

当样式表声明值有冲突时，就会使用层叠规则来确定CSS的属性值。

例如：

<div class="test">
  <h1>test</h1>
</div>

.test h1{
  font-size: 40px;
}

h1 {
  font-size: 20px;
}

在上面的代码中，两个选择器都选中了h1，并且都设置了font-size属性值，同属于作者样式，这显然就属于层叠冲突了。

当发生层叠冲突时，这时就要根据选择器的权重值来计算究竟运用哪一条作者样式。落败的作者样式在Elements>Styles中会被划掉。

如果该条属性作者并没有设置，就会去看一下能否继承到该属性值。例如：

<div class="test">
  <h1>test</h1>
</div>

.test{
  color: red;
}

在上面的代码中，我们虽然没有在h1上书写color属性，但是该属性能够从div上面继承而来，所以最终计算出来的值就是red。

最终，如果没有作者样式，该属性值也无法继承而来，则会使用浏览器的默认样式。

确定声明值：参考样式表中没有冲突的声明，作为CSS属性值

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

使用继承：对仍然没有值的属性，若可以继承则继承父元素的值

使用默认值：对仍然没有值得属性，全部使用默认属性值