四层默认样式:一个值的来路
一个属性最终生效的值,是浏览器按优先级从下往上叠出来的。在你写下任何自定义 CSS 之前,已经有四层在排队——
- Level 1 · Initial value——每个属性在规范里都有一个初始值,不针对任何标签。
- Level 2 · User-Agent stylesheet——浏览器内置样式表,针对具体标签覆盖初始值。
- Level 3 · Normalize——(可选)抹平不同浏览器之间 UA 样式的差异。
- 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 Stylesheet、Normalize vs Reset三页分别展开这几层。