Normalize.css 不是重置工具，而是修复跨浏览器不一致的标准化方案；它保留有用默认样式（如语义化字体、标题层级），仅修正渲染差异（如button字体继承、video显示、h1间距），不处理伪元素、布局或设计规范，需配合自定义样式并严格前置加载。
Normalize.css 不是“重置”（reset），它不会把所有样式暴力清空成 margin: 0; padding: 0;，而是**保留有用的默认样式，仅修复已知的跨浏览器不一致问题**。直接替换 reset.css 可能导致表单控件变丑、列表缩进消失、small 文字不可读等意外效果。
为什么不能当 reset.css 用
Normalize.css 的设计目标很明确：修复 bug，不是抹平一切。比如：
-
button和input[type="button"]在 Safari 和 Firefox 中默认字体继承行为不同，Normalize 会统一设为font: inherit，但不会动background或border -
h1在 IE 和 Chrome 中默认字号差得不多，它只微调font-size和margin，而不是全设成1em -
audio、video等新元素在旧版 IE 中不显示，Normalize 会加display: inline-block，但不会影响现代浏览器的原生布局逻辑
正确引入方式：放在自定义 CSS 之前
顺序错了，你的 font-size: 16px 可能被 Normalize 里更具体的规则覆盖（比如针对 html 的 font-size: 100%）。必须保证：
- HTML 中
<link>标签排在你自己的main.css之前 - 如果是构建流程（如 Webpack），确保
@import 'normalize.css';出现在你所有自定义@import的最顶部 - 不要用
@import在 CSS 文件里加载 Normalize——它会阻塞渲染，且优先级易失控
推荐做法：
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css"> <link rel="stylesheet" href="css/main.css">
常见误配场景：表单控件样式崩坏
很多人引入 Normalize 后发现 select 下拉箭头没了、checkbox 对齐错位、textarea 拉伸异常——这不是 Normalize 的问题，是它暴露了你原来靠“重置”掩盖的兼容性债。
立即学习“前端免费学习笔记（深入）”；
- Normalize 给
input、select、button加了font-family: inherit; font-size: 100%，如果你的body没设font-family，它们就回退到浏览器默认字体（比如 Windows 上是 Segoe UI，macOS 是 San Francisco），视觉突兀 - 它移除了
textarea的overflow: auto（因为现代浏览器默认已有），但如果你的 CSS 依赖这个声明做高度控制，就得补上 -
appearance: none不是 Normalize 加的，但你若后续用它隐藏原生控件样式，记得自己重写border、padding和焦点状态
要不要删掉 Normalize 里不需要的部分
可以删，但别瞎删。比如：
- 删
img相关规则？不行——IE8 默认给img加border: 1px，不修就出蓝边 - 删
svg规则？谨慎——旧 Android 浏览器对vertical-align处理不一致，可能让图标和文字错位 - 删
table部分？除非你项目里真不用表格，否则border-collapse: collapse和empty-cells: show是防坑关键
真正可安全删减的是极冷门元素，比如 keygen（已废弃）、menu（几乎没人用）。日常开发中，直接用完整版更省心。
Normalize.css 的价值不在“用了就没事”，而在帮你看清哪些样式差异是浏览器真实存在的，哪些是你过去靠暴力重置糊弄过去的。一旦开始调试 fieldset 在 Firefox 中的边框宽度，或 progress 在 Safari 中的背景色继承，你就知道它为什么非得放在最前面、为什么不能删——这些细节不报错，但会让 QA 在凌晨三点给你发截图。
