css计算过程 / css computed

目录

确定声明值

层叠冲突

使用继承

使用默认值

---

确定声明值

所谓声明值就是作者自己所书写的 CSS 样式。

所谓确认声明值就是将作者样式表与浏览器样式表中没冲突的样式值确定为最终值。

例如：p{ color:#f00; display:block; }

在上面的示例中，作者样式表中设置了 color 与display，而浏览器样式表（专业名字叫用户代理样式表，下文中主要用浏览器样式表代替，便于理解）中设置了诸如 display、margin-block-start、margin-block-end、margin-inline-start、margin-inline-end 等属性对应的值。

其中color没有什么冲突，color的值#f00会被确认为color的终值，而display冲突了，需要参与后续的计算过程才能得到终值。

层叠冲突

作者样式表与浏览器样式表冲突的部分会在这一步经过以下流程处理：

一、比较源的重要性

当不同的 CSS 样式来源拥有相同的声明时，此时就会根据样式表来源的重要性来确定应用哪一条样式规则。

样式来源整体分为三种：

• 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称**浏览器样式**。
• 网页的作者可以定义文档的样式，这是最常见的样式表，称之为**页面作者样式**。
• 浏览器的用户，可以使用自定义样式表定制使用体验，称之为**用户样式**。

对应的重要性顺序依次为：作者样式 > 用户样式 > 浏览器样式

例如：p{ display:inline-block; }

作者样式display: inline-block优先级 > 浏览器样式 display: block

二、比较优先级

如果是在在同一个源中有样式声明冲突，就会进行样式声明的优先级比较，即通过选择器的权重来比较重要性

三、比较次序

经历了上面两个步骤，大多数的样式声明能够被确定下来。但是还剩下最后一种情况，那就是样式声明既是同源，权重也相同。此时就会进入第三个步骤，比较样式声明的次序。

例如：p{ color:#f00; } p{ color:#000; }

在上面的代码中，同样都是**页面作者样式**，**选择器的权重也相同**，此时位于后面的样式声明会覆盖掉上面的那一条样式声明，最终会应用 *20px* 这一条属性值。

至此，样式声明中存在冲突的所有情况，就全部被解决了。

使用继承

上一步完成后，解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。

那么如果没有声明的属性呢？此时就使用默认值么？

*No、No、No*，别急，此时还有第三个步骤，那就是使用继承而来的值。

//html
<div>
    <p>red</p>
</div>

//css
div{
    color:#f00;
}

在上面的代码中，我们针对 div 设置了 color 属性值为红色，而针对 p 元素我们没有声明任何的属性，但是由于 color 是可以继承的，因此 p 元素从最近的 div 身上继承到了 color 属性的值，最终p标签的内容会以红色显示。

那些属性是可以继承的呢？笼统的讲文字相关的大部分属性是可继承的，其他大部分是不可以继承的。全部属性的继承情况请查阅文档。

控制继承

使用默认值

目前走到这一步，如果属性值都还不能确定下来，那么就只能是使用默认值了。

一个 HTML 元素要在浏览器中渲染出来，必须具备所有的 CSS 属性值，但是绝大部分我们是不会去设置的，用户代理样式表里面也不会去设置，也无法从继承拿到，因此最终都是用默认值。