normalize.css 与 reset.css 的核心区别在于：前者修复浏览器样式差异并保留有用默认行为，后者强制归零后重建；推荐用于现代框架项目，需正确引入并配合 box-sizing 等后续设置。
为什么直接用 * { margin: 0; padding: 0 } 不行
它粗暴清空所有元素的内外边距，但没解决更深层问题：比如 button 在 Chrome 和 Firefox 中默认字体不一致、audio 和 video 标签默认有黑边框、h1 到 h6 的缩放比例在不同浏览器中实际渲染值不同。更麻烦的是，它把 ol 和 ul 的列表标记也“重置”没了，还得手动加回 list-style。
真正要的不是“归零”，而是“对齐”——让各浏览器从同一套合理基线出发。
normalize.css 和 reset.css 的关键区别在哪
normalize.css 不是抹掉样式，而是修复差异；reset.css（如 Eric Meyer 版）是强制归零再重建。前者保留有用的默认行为（比如 sub 和 sup 的垂直偏移、pre 的空白处理），后者连这些都干掉。
如果你用的是现代框架（Vue/React），或项目需要表单控件保持可访问性语义表现，normalize.css 是更安全的选择。
立即学习“前端免费学习笔记（深入）”；
- 它修复了
display在audio/canvas/progress等新标签上的兼容性 - 修正了移动端
click延迟和tap-highlight-color行为 - 对
font-family做了系统级 fallback（如system-ui），而不是硬写"Helvetica"
怎么引入 normalize.css 才不踩坑
别直接下载后改名塞进 css/ 目录就完事。常见错误是加载顺序不对，或者被后续样式覆盖。
- 必须放在所有自定义 CSS 文件的最前面，否则
.btn { margin: 1em }可能被 normalize 里更具体的规则（如button { margin: 0.5em }）压住 - 用 npm 安装比手动复制更稳：
npm install normalize.css，然后在入口 JS 或主 SCSS 中@import "normalize.css"; - 不要用 CDN 链接放在
<head>最底部——它可能晚于某些内联 style 或异步 CSS 加载，导致闪动
如果你用 PostCSS，可以配合 postcss-normalize 插件，在构建时自动注入，避免手误漏掉。
normalize.css 后还要做什么才真正统一
它只是起点。比如它不会帮你设 box-sizing: border-box，也不会统一颜色或排版比例。这些得你自己补。
- 务必紧跟一行：
* { box-sizing: border-box; }—— 否则padding会撑大你写的width: 100% - 设置基础字号和行高前，先确认
html元素是否被用户缩放过（比如 iOS 双击放大后，rem计算会偏移），normalize不管这个 - 它不处理 CSS 自定义属性（
--primary-color），也不管你用不用 BEM 或 utility-first，这些全靠后续约定
最常被忽略的一点：normalize 对 SVG 内联样式、foreignObject 或 Web Components 的 shadow DOM 无能为力，那些地方得单独处理。
