normalize.css 是最轻量、语义完整、维护成本低的浏览器样式校准方案，但必须置于所有自定义 CSS 之前加载，不可与 reset.css 混用，且不处理伪元素、交互态及移动端特有表现。
normalize.css 是目前解决浏览器默认样式差异最轻量、语义保留最完整、维护成本最低的方案——但它不是“加了就统一”，顺序错、混用、或期望它覆盖所有交互/表单细节，都会导致白引入。
normalize.css 必须放在所有自定义 CSS 之前加载
它的规则依赖选择器权重和声明顺序。如果 normalize.css 在 main.css 后面加载，像 html { line-height: 1.15; } 或 button { font-family: inherit; } 这类基础校准就会被你写的 body { font-size: 16px; } 覆盖。
常见错误现象：
- 页面闪一下：先按浏览器 UA 样式渲染，再重绘成 normalize 后效果
-
textarea在 iOS 上仍不能拖拽缩放（resize被 UA 样式覆盖后未被 normalize 恢复） -
input[type="number"]的上下箭头在 Chrome 显示、Safari 隐藏——normalize 不处理 appearance，默认态已校准，但控件外观仍由浏览器决定
实操建议：
- 纯 HTML 项目：用
<link rel="stylesheet" href="css/normalize.min.css">，且该标签必须是中第一个<link> - Webpack/Vite 项目：在主 SCSS/JS 入口顶部写
@import 'normalize.css';，确保它打包后位于输出 CSS 最前面 - 绝对不要把 normalize 内容复制进
main.css末尾——它的修复逻辑靠前置声明生效
normalize.css 和 reset.css 绝对不能混用
两者目标相反、规则冲突。比如 reset.css 把 blockquote 的 margin 清零，而 normalize.css 显式设为 margin: 1em 40px;；混用后结果取决于谁权重高、谁后加载，不可预测。
更隐蔽的问题：
- 文字突然变小：reset.css 重置了
html { font-size: 100%; }，而 normalize 默认不碰这个，混用后可能触发 UA 的 fallback 尺寸 - 行高塌陷：某些 reset 方案设
line-height: normal;，直接覆盖 normalize 的line-height: 1.15; - 构建产物里搜到两套
line-height值，说明某 UI 库（如 Ant Design）悄悄自带 reset，得去查文档确认是否已包含类似逻辑
判断依据很简单：项目里只允许出现一套“基础样式校准”逻辑。用了 Tailwind CSS 或 Bootstrap 5+？它们内部已集成 normalize-like 行为，重复引入反而引发权重冲突。
normalize.css 不处理伪类、伪元素和移动端特定表现
它只管“默认态”，不管交互反馈和平台特性。所以加了 normalize.css 后，这些不一致依然存在：
-
button:focus在 Safari 有蓝色 focus ring，在 Chrome 是 outline，行为不统一 - iOS
select右侧原生下拉箭头位置偏移，需手动加-webkit-appearance: none;并重绘 -
input[type="number"]的 spinner 按钮，Chrome 显示、Firefox 隐藏、Safari 完全无微调入口——normalize 不覆盖::-webkit-inner-spin-button等伪元素 -
*::before和*::after仍走浏览器默认box-sizing: content-box，现代组件依赖伪元素做装饰时容易溢出
实操建议：
- 在
normalize.css后加一层轻量“修复 CSS”，例如统一outline: none;（注意可访问性！应改用box-shadow模拟 focus 态） - 对关键表单控件单独补丁：
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } - 需要精确尺寸控制？必须自己加通配符：
*, *::before, *::after { box-sizing: border-box; }—— normalize 不做这事
为什么 * { margin: 0; padding: 0; } 不是解法
它清空一切，包括有用的默认行为：列表项丢失缩进、button 失去字体继承、h1 失去语义层级感、焦点 outline 消失导致键盘用户无法导航。
normalize.css 的设计哲学是“校准而非清空”。它让 h1 在所有浏览器都保持加粗 + 相对字号 + 可预测 margin，而不是变成一张白纸。
真正要警惕的是那些“看起来干净”的重置写法——它们往往以牺牲语义和可访问性为代价。而线上问题最常出在看不见的地方：iOS 表单无法聚焦、屏幕阅读器跳过标题、键盘 Tab 键卡死在某个 input 上。
复杂点不在引入，而在理解它不做什么：它不负责视觉设计，不接管交互态，也不替你决定哪些元素该有阴影、圆角或动画。这些必须由你自己的 CSS 显式定义，且始终建立在 normalize 提供的稳定基线之上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
