← How does CSS work · 样式从哪来 / 四层默认样式:一个值的来路 待审核 1 / 6
overview · 4 levels

四层默认样式:一个值的来路

一个属性最终生效的值,是浏览器按优先级从下往上叠出来的。在你写下任何自定义 CSS 之前,已经有四层在排队——

  1. Level 1 · Initial value——每个属性在规范里都有一个初始值,不针对任何标签。
  2. Level 2 · User-Agent stylesheet——浏览器内置样式表,针对具体标签覆盖初始值。
  3. Level 3 · Normalize——(可选)抹平不同浏览器之间 UA 样式的差异。
  4. Level 4 · Reset——(可选)项目开头主动清掉不想要的默认值。

后两层要你自己引入才存在,这页先只看前两层。挑一个属性,下面会用 getComputedStyle 实测它的 initial value 与 UA 值,看谁最终胜出。

关键直觉: display 的 initial value 其实是 inline——<div> 之所以是块级,不是因为「div 天生是块」,而是因为 UA stylesheet 里写了 div { display: block } 把初始值盖掉了。把属性切到 display 即可验证。

1 · 为什么要分这么多层?

分层让「覆盖」变得有秩序:你写的 author 样式优先级高于 UA,UA 又高于规范初始值。Normalize 和 Reset 不是浏览器给的,而是你为了跨浏览器一致清空默认而主动插进 Level 3/4 的那一层。规范默认值与继承User-Agent StylesheetNormalize vs Reset三页分别展开这几层。