使用 reset.css 或 normalize.css 统一浏览器默认值，消除差异。
在 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 代码。
行动指南：
- 新项目：直接使用
modern-normalize或框架自带的 Preflight（如 Tailwind, Vite 模板）。 - 必选项：无论选哪个，确保包含
*, *::before, *::after { box-sizing: border-box; }，这能解决 80% 的布局计算痛苦。 - 避免过度：不要盲目复制粘贴十几年前的 Meyer Reset，那里面包含了很多针对 IE6 的无用代码。
- 检查无障碍：重置样式后，务必测试键盘导航（Tab 键）和屏幕阅读器，确保没有误删
:focusoutline 或破坏标题层级。