User-Agent Stylesheet

每个浏览器都内置一份样式表（Chromium 是 html.css、Firefox 是 html.css/forms.css），在你写任何 CSS 之前就先跑。它针对具体标签覆盖 Level 1 的初始值，给 HTML 一套「开箱即用」的外观：标题大而粗、段落有上下间距、列表有项目符号和缩进、链接是蓝色带下划线、按钮长得像按钮。

下面这段 HTML 默认按 UA 样式渲染。点按钮剥离 UA 样式（给所有元素强制 all: initial，退回纯粹的 initial value），观察它塌缩成的样子——这就是没有 UA 时，页面只剩 Level 1 初始值的呈现。

1 · UA stylesheet 里大概写了什么

下面是 Chromium UA 样式表的代表性规则（简化）。注意每条几乎都在覆盖某个属性的 initial value:

html, body, div, h1, p, ul, ol, li, blockquote { display: block }   /* initial 其实是 inline */
li                { display: list-item }
body              { margin: 8px }                                     /* 页面四周的留白 */
h1                { font-size: 2em; font-weight: bold;
                    margin-block: 0.67em }
p, blockquote     { margin-block: 1em }
ul, ol            { margin-block: 1em; padding-inline-start: 40px;
                    list-style-type: disc /* ol → decimal */ }
strong, b         { font-weight: bold }
a:any-link        { color: -webkit-link; text-decoration: underline;
                    cursor: pointer }
button            { appearance: auto; /* 一整套原生外观 */ }

想查某个标签完整的 UA 默认值、或对比它在不同引擎下的差异？推荐 Browser Default Styles——可搜索的 UA stylesheet 数据库，按标签列出它在 Blink(Chrome)/ WebKit(Safari)/ Gecko(Firefox)/ Trident(IE)各引擎下的默认规则，比翻浏览器源码快得多。