深入CSS（3） - CSS 求值 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第6天

「前言」

思考：为什么有些css样式可以生效，而有些css样式是无效的？

本篇文章通过对 CSS 求值过程加深你对这一问题的理解

「CSS属性值计算过程」

现列出 CSS 计算某一项属性会经历的过程

graph TD
filtering(filtering) -->|声明值| cascading(cascading) --> |层叠值| defaulting(defaulting) --> |指定值| resloving(resloving) --> |计算值| formatting(formatting) --> |使用值| constraining --> |实际值| e(渲染)

「过程详解」

1. 构建 dom 树

在这个过程中也会构建 CSSOM(css 树)，会读取用户文件中的样式，对于任何一个 dom 节点，都有一个对应的样式表

假设用户对一个元素节点定义以下样式

p {
    font-size: 18px;
}

p {
    font-size: 1.2em;
}

p{
    invalid: invalid; // 这里模拟一个无效值
}

2. 声明值

声明值（declared value）:对于开发者来说，就是显式指定的样式

在这一步之前会 filtering（过滤） 无效属性

p {
    font-size: 18px;
}

p {
    font-size: 1.2em;
}

由于 invalid 是无效属性，所以会被删除掉

3. 层叠值

层叠性作为 css 三大特性之一，通过 cascading（特异性）检验出唯一一个有效值

p {
    font-size: 1.2em;
}

具体的特异性（优先级）规则可以参考这篇文章：juejin.cn/post/712461…

4. 指定值

当层叠值为空的时候，使用浏览器默认的继承值或者初始值

关于css 继承性这篇文章也有详解：juejin.cn/post/712461…

5. 计算值

 计算值：计算一些特殊的值（inherit、initial、unset 和 revert）或相对值（如 em 单位或百分比值）所获得的值。

注意：这一步不会将百分比的值转化为具体值

6. 使用值

进一步转换未处理的计算值，将关键字和百分比等转化为使用值

思考：为什么在这一步多此一举呢，不是直接在计算值的时候计算属性值更好吗？

答：由于不同设备的差异或者用户更改浏览器视口大小，势必会导致某些属性的出入（比如说图片的大小，元素的大小，rem属性），设置 formatting 阶段就是对这个问题产生的结果进行统一处理，如果后续需要更改属性值，只需要重复这一步之后的过程

7. 实际值

一个CSS属性的实际值(actual value)，是使用值(used value)被使用后的近似值。

例如，浏览器可能只能渲染一个整数像素值的边框，而该整数像素值(实际值)可能是一个小数值(使用值)被强制四舍五入取整之后的近似结果值。

「过程图」

「参考文章」

mdn官方文档：developer.mozilla.org/en-US/docs/…
参考博客（及其建议阅读，作者对于每一个过程详细讲解并且举例说明）：zhuanlan.zhihu.com/p/267617607