用 link 引入 reset.css 更稳妥，因其阻塞渲染且确保优先生效；modern-normalize 比 eric-meyer-reset 更优，它保留语义化默认样式、仅修正跨浏览器差异，并需置于所有自定义 CSS 之前。
为什么用 link 引入 reset.css 比直接写在 style 标签里更稳妥
浏览器解析 HTML 是从上到下顺序进行的，link 标签引入的 CSS 默认是阻塞渲染的（除非加 media="print" 或 rel="preload"），能确保 reset 规则在所有自定义样式之前生效。如果把 reset 写进 ，又不小心把它放在了自定义样式后面，那 reset 就白写了——比如 body { margin: 0 } 被后面的 body { margin: 8px } 覆盖，页面依然有默认外边距。
另外，外部 CSS 文件可被缓存，复用率高；而内联样式每次都要重新下载、解析，对首屏性能不友好。
选哪个 reset.css？推荐 modern-normalize 而不是 eric-meyer-reset
老派的 reset.css（如 Eric Meyer 版）会把所有元素的 margin、padding、border 全设为 0，看似“清干净”，实则抹掉了表单控件、h1～h6 的合理默认样式，后续反而要花更多代码去“恢复”语义化表现。
modern-normalize 更务实：它保留有用的默认行为（比如 button 的光标、input 的边框、标题的字号层级），只修正跨浏览器不一致的部分（如 Firefox 和 Chrome 对 textarea 垂直对齐的处理）。它体积小、逻辑清晰，适合现代项目。
立即学习“前端免费学习笔记（深入）”；
- npm 安装：
npm install modern-normalize - 引入方式（放在所有自定义 CSS 之前）：
- 如果是 CDN，用：
引入位置必须在自定义 CSS 之前，否则 reset 失效
reset 的作用本质是“设底限”，靠 CSS 优先级和声明顺序来压制浏览器默认样式。一旦你的 base.css 或 main.css 在 link 之前就加载并执行了，里面哪怕只有一条 * { box-sizing: border-box }，都可能因为选择器权重或顺序问题，让 reset 的同名规则被跳过。
检查方法很简单：打开 DevTools → Elements 面板 → 点击任意元素（如 h1），看右侧 Styles 面板里 margin、font-size 等属性是否来自你引入的 reset 文件，且没有被划掉。
- ✅ 正确顺序：
- ❌ 错误顺序：
（此时 base.css 里的body { margin: 0 }可能已生效，reset 的同规则无效）
遇到 reset 不生效？先查这三件事
常见失效不是 reset 本身有问题，而是加载链路上卡住了。别急着换库，按顺序排查：
- 检查网络面板（Network tab）：
modern-normalize.css请求状态是不是200？有没有404或blocked？路径写错、CDN 地址过期、本地路径没配好代理都可能导致空加载 - 检查控制台（Console tab）：有没有
Failed to load resource或CSS syntax error？某些构建工具（如 Vite）对 CSS 中的@charset或 BOM 字符敏感，可能静默失败 - 检查 HTML 结构：
link标签是否意外写在里？规范要求它必须在内，否则部分浏览器会延迟解析甚至忽略
reset 不是银弹，它只解决“浏览器默认样式差异”这一层问题。如果你用了 UI 框架（如 Element Plus、Ant Design），它们内部自带样式重置，再额外引入 reset 可能引发冲突——这时候该关掉框架的 reset 选项，或干脆不用外部 reset。
