CSS 属性值计算过程（Computed Value）

浏览器把你写的样式、默认样式、继承样式，一步步算出最终 Computed 值，决定元素长什么样。

markdown 复制代码

1. 确定声明值 → 2. 层叠（解决冲突） → 3. 继承 → 4. 使用默认值

步骤	作用	关键点
1. 确定声明值	收集所有样式声明	作者样式 + 浏览器默认样式，无冲突直接采用
2. 层叠	解决冲突，只留一个赢家	重要性 → 特殊性 → 源码顺序
3. 继承	补上前两步仍无值的属性	仅可继承属性（color、font-size 等），优先级低于声明
4. 使用默认值	兜底	走完前三步仍无值，用属性规范初始值

收集所有作用于当前元素的样式，并做基础转换：

操作	示例
颜色值转换	`red` → `rgb(255, 0, 0)`
字重转换	`bold` → `700`
规则修正	`float: left` 强制把 `display` 转为 `block`

冲突属性按 3 层优先级 筛选赢家：

① 比较重要性

yaml 复制代码

作者样式（有 !important） > 作者样式（无 !important） > 浏览器默认样式

② 比较特殊性（权重）

四位数规则：(内联, ID, 类/属性/伪类, 元素/伪元素)，从高位比到低位

③ 比较源码顺序

权重相同，后写覆盖先写。

例：<a> 标签默认有 text-decoration，已在声明值阶段确定，不会继承 body 的 none。

走完前三步仍无值 → 使用该属性规范的初始值（initial value），保证所有属性都有值、元素能正常渲染。

样式不对 → 打开浏览器 DevTools → Computed 面板：

CSS 属性值计算分四步：收集声明 → 层叠解决冲突（重要性 > 权重 > 顺序）→ 继承父元素可继承属性 → 默认值兜底。所有属性最终必有值。