Normalize.css 修复浏览器默认样式不一致但保留语义化行为；应通过包管理器安装并由构建工具注入，或本地引入且置于自定义样式之前；它不处理交互态和组件样式，需额外轻量重置。
Normalize.css 不是“重置”样式，而是修复浏览器默认样式的不一致；直接用 reset.css 会丢掉有用的默认行为（比如 h1 的语义化缩放、audio 的可播放控件），而 normalize.css 保留这些，只修正 bug 和差异。
怎么在项目里正确引入 Normalize.css
别手动复制粘贴 CSS 内容，也别从 CDN 直接 @import（阻塞渲染）。最稳妥的方式是：用包管理器安装，再通过构建工具注入。
- npm 项目：运行
npm install normalize.css，然后在入口 JS 或主 SCSS 文件里写@import 'normalize.css';（Webpack/Vite 默认支持） - 如果用原生 HTML + 构建无关流程，下载最新版
normalize.min.css到css/目录，用<link rel="stylesheet" href="css/normalize.min.css">，且必须放在所有自定义样式之前 - 切忌把
normalize.css内容合并进你自己的main.css底部——它的规则依赖 specificity 和顺序，后置会导致按钮边框、表单聚焦态等失效
为什么用了 Normalize.css 还有按钮样式不一致
因为 normalize.css 只标准化“默认状态”，不处理用户交互态（如 :hover、:focus）或组件级样式（如 button 的背景色、圆角）。它让 <button> 在 Chrome/Firefox/Safari 下都默认有 border、padding、font 继承行为一致，但不会帮你统一成“无边框+蓝底白字”。
- 常见错觉：看到按钮在不同浏览器里颜色不同 → 实际是你的 CSS 覆盖了
button的background-color，但没重置border或outline，导致 Safari 的 focus ring 和 Chrome 的 focus outline 表现冲突 - 真正要解决的是：在 normalize 后加一层轻量 reset，例如对
button, input, select, textarea统一设outline: none（注意可访问性！应改用box-shadow模拟 focus 样式） - 移动端还要额外处理
-webkit-appearance: none，否则 iOS 上select仍带原生下拉箭头，button有灰色背景
Normalize.css 的关键 patch 都修了哪些东西
它不是凭空加样式，而是针对具体浏览器 bug 写的条件修复。比如：
立即学习“前端免费学习笔记（深入）”；
-
img在 IE/Edge 中默认有vertical-align: baseline，导致行内排版塌陷 → normalize 改成vertical-align: middle -
input[type="search"]在 Safari 有私有外观和内边距 → normalize 强制-webkit-appearance: textfield并重置padding -
small元素在 Firefox 默认是font-size: 80%，Chrome 是83%→ normalize 统一为80% -
details/summary在旧版浏览器不支持 → normalize 不做 hack，而是确保它们至少表现为普通块元素（避免布局崩溃）
真正容易被忽略的是：Normalize.css 对打印样式、高对比度模式、prefers-reduced-motion 等场景不做干预——这些得靠你自己后续扩展。它只解决“页面在常规屏幕上首次渲染时，各浏览器看起来别差太多”这一个目标。
