在 Web 发展的早期，不同浏览器（Chrome, Firefox, Safari, IE）对 HTML 标签有着截然不同的默认样式（User Agent Stylesheet）。

• h1 在 A 浏览器是 32px，在 B 浏览器是 24px。
• button 在 C 浏览器有圆角，在 D 浏览器是直角。
• ul 在 E 浏览器有左边距，在 F 浏览器没有。

如果不处理这些差异，你的精心设计的布局会在不同设备上“支离破碎”。reset.css 和 normalize.css 就是为了解决这个问题而生的两种截然不同的哲学。

---

一、核心哲学：推倒重来 vs 求同存异

1. Reset.css：核平策略 (The Nuclear Option)

• 代表：Eric Meyer’s Reset CSS。
• 哲学：“所有浏览器的默认样式都是垃圾，全部清零！”
• 动作：暴力地将所有元素的 margin, padding, font-size, border, list-style 等属性重置为 0 或初始值。
• 结果：所有标签变成一张白纸（裸奔状态）。
  • h1 不再加粗，不再有大字号，变得和普通 span 一样。
  • button 失去所有外观，变成透明背景、无边框的文本。
• 潜台词：“我不信任任何浏览器的默认值，我要从零开始定义一切。”

2. Normalize.css：外交策略 (The Diplomatic Option)

• 代表：Nicolas Gallagher & Jonathan Neal’s Normalize.css。
• 哲学：“保留有用的默认值，只修复不一致的 Bug。”
• 动作：
  • 统一差异：让所有浏览器对 h1, section, audio 等标签的渲染保持一致。
  • 修复 Bug：解决旧版 IE 的块级元素显示问题、SVG 溢出问题等。
  • 保留可用性：保留 h1 的大字号和加粗，保留 button 的可点击外观，保留 table 的边框折叠。
• 潜台词：“浏览器的默认值有其存在的道理（尤其是无障碍性和语义化），我们只需要抹平它们之间的裂痕，而不是消灭它们。”

💡 核心洞察：Reset 是破坏性重建，Normalize 是兼容性修补。前者给你绝对的自由但增加了工作量，后者给你一致的起点且保留了便利性。

---

二、实现机制：代码背后的逻辑

1. Reset.css 的典型操作

/* 暴力清零 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

/* 移除列表符号 */
ul, ol {
    list-style: none;
}

/* 强制字体继承，防止某些浏览器不继承 */
body {
    font-family: inherit;
    font-size: 100%;
}

/* 移除链接下划线 */
a {
    text-decoration: none;
    color: inherit;
}

• 后果：开发者必须手动为 h1 设置字号，为 button 添加背景和边框，为 ul 添加缩进（如果需要）。

2. Normalize.css 的典型操作

/* 1. 纠正所有浏览器的行高不一致 */
html {
  line-height: 1.15; 
}

/* 2. 确保在所有浏览器中都能正确显示 main 元素 */
main {
  display: block;
}

/* 3. 修正 h1 在不同浏览器中的字体大小和边距差异，但保留其“大标题”的特性 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* 4. 修复 button 在 iOS 上的样式变换 */
button, input, optgroup, select, textarea {
  font-family: inherit; 
  font-size: 100%; 
  line-height: 1.15; 
  margin: 0; 
}

• 后果：页面加载后，标题依然是标题，按钮依然是按钮，但在 Chrome 和 Firefox 中长得一模一样。

---

三、优缺点深度对比

维度	Reset.css	Normalize.css
一致性	极高 (因为大家都变成了 0)	高 (抹平了差异，保留了特性)
开发效率	低 (需要重新定义所有基础样式)	高 (直接利用合理的默认值)
文件体积	较小 (规则简单)	稍大 (针对性规则多)
调试难度	高 (忘了设字号会导致文字看不见)	低 (符合直觉)
无障碍性 (A11y)	差 (可能破坏默认焦点样式、字号)	好 (保留了语义化带来的辅助功能)
适用场景	高度定制化设计系统、重构旧项目	大多数现代 Web 应用、快速原型

💡 核心洞察：在现代开发中，Normalize.css (或其衍生版) 是绝对的主流。因为完全清零的成本太高，且容易破坏浏览器的原生无障碍特性（如屏幕阅读器依赖默认的标题层级）。

---

四、现代演进：从“库”到“工程化”

随着 CSS 的发展，直接引入 reset.css 或 normalize.css 文件的方式正在发生变化。

1. Modern Normalizers (现代化归一化)

• 代表：modern-normalize。
• 特点：只针对现代浏览器（去掉了对 IE6-9 的兼容代码），体积更小，更激进地移除过时的 hack，只保留核心的跨浏览器一致性。

2. CSS-in-JS 与 Scoped CSS 的内建

• 现象：在使用 Styled-components, Emotion, 或 Vue Scoped CSS 时，全局 reset 依然必要，但组件内部不再需要。
• 趋势：许多框架（如 Next.js, Create React App）默认已经集成了 normalize 逻辑，开发者无需手动引入。

3. Tailwind CSS 的 “Preflight”

• 创新：Tailwind 没有使用传统的 normalize，而是构建了自己的 Preflight 层。
• 策略：
  • 基于 Normalize.css 的理念。
  • 使用更现代的选择器（如 default 伪类）。
  • 强制盒模型：*, ::before, ::after { box-sizing: border-box; } (这是现代开发最重要的 reset 之一)。
  • 移除所有默认边距：除了排版元素（h1-h6, p），其他元素 margin/padding 归零。
  • 图片响应式：img { max-width: 100%; }。
• 优势：将 Reset/Normalize 逻辑深度集成到工具链中，按需编译，无冗余。

4. 新的标准：revert-layer 和 initial

• CSS 规范正在进化，未来可能通过原生 CSS 关键字更好地控制层叠和默认值，减少对外部库的依赖。

---

🚀 总结：如何选择你的“地基”？

方案	核心逻辑	推荐指数	适用人群
Reset.css	全部清零，白手起家	⭐⭐	需要像素级完美控制的设计驱动型项目；维护老旧系统。
Normalize.css	修复差异，保留有用默认值	⭐⭐⭐⭐	传统多页应用；追求开发效率和无障碍性的团队。
Modern Normalize	仅针对现代浏览器修复	⭐⭐⭐⭐⭐	现代 Web 项目首选。轻量、高效。
Tailwind Preflight	工具链集成的现代化 Reset	⭐⭐⭐⭐⭐	使用 Tailwind CSS 的项目。
自定义 Mini-Reset	只写最需要的几条 (如 box-sizing)	⭐⭐⭐	极简主义者；小型个人项目。

终极心法：

Reset 和 Normalize 的本质，是消除“环境噪声”，让 CSS 代码在所有浏览器中拥有相同的“起跑线”。
不要为了“_reset"而_reset"。问自己：我真的需要把 h1 的字号也清零吗？还是我只希望它在 Chrome 和 Safari 里一样大？
在现代工程中，我们倾向于“最小化干预”：只修复那些真正导致布局错乱的差异，保留浏览器赋予 HTML 的语义智慧和无障碍特性。
记住：box-sizing: border-box 是当今世界最重要的那一行 Reset 代码。

行动指南：

1. 新项目：直接使用 modern-normalize 或框架自带的 Preflight（如 Tailwind, Vite 模板）。
2. 必选项：无论选哪个，确保包含 *, *::before, *::after { box-sizing: border-box; }，这能解决 80% 的布局计算痛苦。
3. 避免过度：不要盲目复制粘贴十几年前的 Meyer Reset，那里面包含了很多针对 IE6 的无用代码。
4. 检查无障碍：重置样式后，务必测试键盘导航（Tab 键）和屏幕阅读器，确保没有误删 :focus outline 或破坏标题层级。