直接用 normalize.css 是因为它统一浏览器差异而不破坏默认行为：保留标题层级、列表缩进、表单可访问性，仅修正不一致；自己重置易导致控件失能、语义丢失。
为什么直接用 normalize.css 而不是自己写重置
浏览器对 h1、ul、button 等元素的默认样式差异很大，比如 Chrome 给 button 加阴影，Firefox 默认不加；Safari 对 input[type="number"] 的上下箭头样式完全不同。自己写 * { margin: 0; padding: 0; } 会干掉所有默认行为，反而让表单控件不可用、列表丢失语义缩进、焦点 outline 消失——这不是“重置”，是“砍掉”。normalize.css 不是清空，而是统一：保留有用默认（如标题层级、列表缩进、表单可访问性），仅修正不一致部分。
怎么引入 normalize.css 才不白引入
常见错误是只在开发环境加，上线后漏掉；或通过 CDN 引入但没配 SRI 校验，导致 CDN 被劫持后样式错乱。正确做法：
- 用 npm 安装：
npm install normalize.css，然后在入口 JS 或主 CSS 文件顶部@import "normalize.css";（注意路径是否正确） - 如果必须用 CDN，至少加上
integrity属性：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" integrity="sha256-3YF7qDv9gDqLmNzGv0iXoZaCJtK4sVWkEjPfA6QwOeM=" crossorigin="anonymous"> - 别把它放在自定义样式之后——顺序错了，
normalize.css的规则会被覆盖，等于没引
normalize.css 和 reset.css 混用会怎样
会冲突。比如 reset.css 把所有 margin 设为 0，而 normalize.css 明确给 blockquote 设了 margin: 1em 40px。两者同时存在时，CSS 优先级取决于选择器权重和加载顺序，结果不可预测。更麻烦的是，某些 reset 方案（如 Eric Meyer’s）会重置 font-size、line-height，而 normalize.css 默认不碰这些——混用后文字突然变小、行高塌陷，排查时根本想不到是两套重置打架。
- 只选一个：项目新起就用
normalize.css；老项目已用 reset 且稳定，别强行替换 - 检查构建产物里是否意外打包了两份：搜索输出 CSS 中是否同时出现
normalize和reset字样 - Webpack/Vite 用户注意：有些 UI 库（如 Ant Design）内部自带轻量 reset，和你的
normalize.css可能有重叠
用了 normalize.css 还要手动处理哪些默认样式
normalize.css 解决的是跨浏览器一致性，不是设计一致性。它不会帮你处理这些：
立即学习“前端免费学习笔记（深入）”；
-
img默认是 inline 元素，会带底部空白——得自己加img { vertical-align: middle; }或display: block; -
button、input在不同浏览器中 focus outline 颜色/宽度不同，normalize.css不改 outline，只确保它存在；你要统一视觉就得自己写:focus { outline: 2px solid #007bff; } -
textarea的resize行为默认开启，但用户常需要禁用：textarea { resize: vertical; }或resize: none;，这得你定 - 移动端
click延迟、user-select默认启用等问题，normalize.css完全不涉及
真正容易被忽略的点是：它不解决盒模型问题。box-sizing: border-box 还是要你自己全局加，normalize.css 里只对少数表单元素设了这个值，其余元素仍走浏览器默认的 content-box。
