直接用 normalize.css 是因为它校准而非清零浏览器默认样式，保留语义化表现并修复跨浏览器不一致；需全局引入、置于自定义样式前，禁与 reset.css 混用，且需手动处理 input[type="number"]、textarea 等漏网问题。
为什么直接用 normalize.css 而不是自己写重置？
因为浏览器默认样式差异远不止 margin 和 padding——button 的字体继承、input 的行高、audio 和 video 的默认边框、甚至 details 的折叠行为，在 Chrome/Firefox/Safari/Edge 里全都不一样。自己写 * { margin: 0; padding: 0; } 只是粗暴抹平，反而破坏语义化表现（比如列表项缩进消失、表单控件失焦状态异常）。normalize.css 不是清零，是“校准”：保留有用默认，修复不一致，让 h1 在各浏览器都真正是大号加粗文本，em 真正斜体且可继承。
怎么引入才不会白加？常见加载错误
最常踩的坑是加载顺序和作用域冲突：
-
normalize.css必须放在所有自定义 CSS 之前，否则你的body { margin: 20px; }会覆盖它的基础重置 - 如果用构建工具（Webpack/Vite），别只
@import 'normalize.css'到某个组件里——它得是全局生效的，应 import 到入口 JS 或主 SCSS 文件顶部 - CDN 引入时注意版本：
https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css（v8 是最后一个广泛兼容 IE11 的版本；v9+ 已放弃 IE，若需支持旧版，别升错）
normalize.css 和 reset.css 混用会怎样？
千万别混。两者设计哲学相反：reset.css 把所有元素打回“裸状态”，连 strong 加粗、blockquote 缩进都干掉；normalize.css 则刻意保留这些语义化样式。混用后会出现诡异现象：比如 button 看起来像普通文字（被 reset 清掉样式），但点击时又突然有默认焦点环（normalize 保留了 focus 样式）。实际项目中，选一个，只用一个。
引入后还要手动处理哪些“漏网之鱼”？
normalize.css 解决的是标准 HTML 元素，但现代项目绕不开这些：
立即学习“前端免费学习笔记（深入）”；
-
input[type="number"]在 Safari 里右侧有微调按钮，Chrome 里没有——得单独加appearance: none;并手绘按钮 -
textarea的resize行为在 Firefox 默认可拉，Chrome/Safari 默认也可拉，但尺寸计算逻辑不同，建议统一设为resize: vertical;或none - 自定义 Web Component（如
my-tabs）完全不在 normalize 覆盖范围内，它的 shadow DOM 样式必须自己重置
这些没法靠一个 CSS 文件解决，得在具体组件里补。
