css 属性值的计算过程

128 阅读2分钟

CSS属性值的计算过程包括以下几个步骤:

image.png

  1. 收集样式规则:浏览器首先需要收集所有的样式规则,包括内联样式、嵌入样式和外部样式表。
  2. 构建样式规则树:将收集到的样式规则按照优先级构建成一棵样式规则树。在构建过程中,浏览器会依据CSS选择器的特定性(specificity)来确定规则的优先级,以及使用后面的规则来覆盖先前的规则。
  3. 计算样式:样式规则树构建完成后,浏览器就可以开始计算元素的样式了。首先,浏览器需要确定哪些样式适用于每个元素。这个过程称为匹配(matching)。匹配的过程是通过将选择器与元素的标签名和属性进行比较来实现的。
  4. 属性值计算:匹配完成后,浏览器需要计算出每个元素的最终样式值。这个过程涉及到CSS属性的继承、计算和覆盖规则等方面。最终的样式值将被应用到元素上。
  5. 渲染:最后,浏览器将使用计算出的样式来渲染页面。在这个过程中,浏览器将根据计算出的样式为每个元素分配盒子(box),并将它们放置在正确的位置上,以便呈现出最终的页面布局和样式效果。

1. 确定声明值,收集样式中没有冲突的

image.png 如图红色是样式有冲突的,此时没有不管, 我们将没有冲突的声明(绿色圈)作为属性值

层叠冲突

接上图, font-size 被多个样式重复声明,我们使用层叠规则,确定css 属性值

  1. 比较重要性
  2. 比较特殊性
  3. 比较原次序

2. 重要性

作者的样式优先级>系统默认样式优先级

image.png

特殊性

按照规则的优先级, 优先级高的被使用 别内联更高的是!important 10000 image.png

比较原次序

两个规则优先级相同, 后面的优先级大于前面的优先级

4. 使用继承

对仍然没有值的属性,若可以继承,则继承父元素的值

5. 使用默认值

对仍然没有值的属性,使用默认值