normalize.css必须置于所有自定义css之前，因其依赖选择器权重和声明顺序生效；顺序错误会导致按钮字体不一致、样式闪动、表单控件错位等问题。
直接用 normalize.css 是目前最稳妥、副作用最小的跨浏览器样式校准方式；但它不是“加了就一致”，顺序错、混用、或忽略后续补丁，反而会让问题更隐蔽。
为什么不能把 normalize.css 放在自定义 CSS 后面
normalize.css 的修复逻辑依赖基础选择器权重和声明顺序。比如它设 button { font-family: inherit; }，但如果你的 main.css 里先写了 body { font-family: "Inter", sans-serif; }，而没给 button 显式继承，那按钮在 Windows 上可能回退到 Segoe UI，macOS 上变成 San Francisco，视觉割裂。
常见现象包括：
- 页面首次渲染时文字/间距闪动（UA 样式 → normalize → 自定义，三阶段重绘）
-
textarea在 iOS 上无法拖拽缩放（resize被 UA 样式覆盖后未被 normalize 恢复） -
input[type="number"]的微调按钮在 Safari 显示、Chrome 隐藏——normalize 不干预appearance，只校准默认盒模型和字体继承
实操建议：
- 纯 HTML 项目：
<link rel="stylesheet" href="css/normalize.min.css">必须是中第一个<link> - Webpack/Vite 项目：在主 SCSS 入口顶部写
@import 'normalize.css';，确保打包后位于输出 CSS 最前面 - 绝对不要把
normalize.css内容复制进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 解决的是共性问题，不是万能胶。它让 input、select、button 继承字体和字号，但不处理：
-
appearance: none后的边框、padding、焦点状态重写（这是你自己的责任） -
select下拉箭头消失——normalize 不隐藏原生控件，只是校准基础样式；若你用了appearance: none却没补background和padding-right，箭头自然没了 -
checkbox和radio对齐错位——normalize 修复了vertical-align基线问题，但如果你的父容器用了display: flex或line-height异常，仍需手动调align-self或margin-top -
textarea拉伸异常——normalize 移除了overflow: auto（因现代浏览器默认已有），但如果你的 CSS 依赖这个做高度控制，就得补上
真正难处理的不是“怎么统一”，而是“统一到哪一层”：normalize.css 解决标准 HTML 元素的共性差异，但 input[type="search"] 右侧清除按钮、details/summary 的折叠动画、深色模式下 mark 的背景色，都得靠显式声明或特性检测兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
