normalize.css 是校准浏览器默认样式差异的轻量方案，需优先引入且不可与 reset.css 混用；它保留语义化样式，但不处理交互态和移动端特定表现，需后续补丁修复。
normalize.css 不是用来“重置”样式的，而是用来校准浏览器默认行为的差异——它让 h1 在 Chrome、Firefox、Safari 里都真正是加粗大号文本，让 button 都继承字体、都有可点击的边框和 padding，而不是变成一张白纸。
直接上结论：用 normalize.css 是目前最轻量、语义保留最完整、维护成本最低的跨浏览器样式统一方案；但必须按顺序加载、不能合并进自定义 CSS 底部、也不能和 reset.css 混用。
怎么正确引入 normalize.css 到 HTML 中
别复制粘贴 CSS 内容，也别用 @import url('https://cdn.example.com/normalize.css') —— 这会阻塞渲染，且无法被构建工具优化。
推荐方式只有两种：
立即学习“前端免费学习笔记（深入）”；
- npm 项目：运行
npm install normalize.css，然后在主 SCSS/JS 入口里写@import 'normalize.css';（Webpack/Vite 默认支持） - 纯 HTML 项目：下载
normalize.min.css放到css/normalize.min.css，用<link rel="stylesheet" href="css/normalize.min.css">引入，且必须放在所有自定义<link>或<style>标签之前
常见错误：把 normalize.css 的内容复制进你自己的 main.css 文件末尾 → 它的规则依赖 specificity 和声明顺序，后置会导致 button:focus、input[type="number"] 等样式失效。
为什么加了 normalize.css 还有按钮/输入框样式不一致
normalize.css 只管“默认态”，不管交互态和组件级视觉设计。它确保：
-
button在各浏览器都默认有border、padding、font-family: inherit -
input和select都继承父级字体大小和行高 -
textarea默认是vertical-align: top而不是baseline
但它不处理：
-
:hover、:focus、:active等伪类样式（所以 Safari 的 focus ring 和 Chrome 的 outline 可能仍打架） - iOS 上
select的原生下拉箭头（需手动加-webkit-appearance: none） -
input[type="number"]的上下微调按钮（各浏览器默认显示逻辑不同，normalize.css不覆盖）
解决办法：在 normalize.css 后加一层轻量“修复” CSS，比如统一设 outline: none（注意可访问性！应改用 box-shadow 模拟 focus 态）。
normalize.css 和 reset.css 能不能一起用
不能。这是最容易踩的坑。
reset.css（比如 Eric Meyer 版）走的是“全部清零”路线：* { margin: 0; padding: 0; border: 0; }，它会让 h1 失去语义化缩放、ol 失去编号、audio 失去播放控件——这些恰恰是 normalize.css 努力保留的。
两者混用的结果是：规则互相覆盖，button 可能既没边框也没背景，又没文字颜色，变成不可见控件；details 折叠行为在旧版 Safari 直接失效。
如果你已经用了 reset.css，就别再加 normalize.css；如果选了 normalize.css，就彻底放弃任何全局 * {...} 清零逻辑。
移动端和表单控件还有哪些漏网之鱼
normalize.css 对移动端和现代表单的支持是渐进的，但仍有几个高频问题需要手动补：
- iOS
input和textarea默认有内阴影和圆角 → 加-webkit-appearance: none并重置border-radius -
input[type="number"]在 Chrome 有上下箭头，在 Firefox 没有 → 用appearance: textfield统一（注意 Safari 15.4+ 才支持） -
select在 iOS 仍带原生箭头 → 必须配-webkit-appearance: none+ 自定义背景箭头 -
button在 Safari 某些版本默认有灰色背景 → 显式设background-color: transparent
这些都不是 normalize.css 的缺陷，而是它的设计边界：它只解决“浏览器 UA stylesheet 的差异”，不越界接管“设计师对 UI 控件的视觉定义”。真正的统一，永远发生在 normalize.css 之后那一小段你亲手写的 CSS 里。
