Normalize.css必须在Bootstrap之前加载，否则其规则会被覆盖；若DevTools中看到h1、button等属性被划掉，大概率是顺序错误或重复引入导致冲突。
normalize.css 必须在 Bootstrap 之前加载，否则规则被覆盖
如果你在 DevTools 的 Elements 面板里看到 h1、button 或 input 的 font-size、margin 等属性被划掉（strikethrough），大概率是 Bootstrap 的样式覆盖了 normalize.css。Bootstrap 5 的 _reboot.scss 本身就含重置逻辑，但它默认启用；若你又在 HTML 中后加载 normalize.css，它的声明就会失效。
常见错误包括：
- 在 Vue 组件的
<style scoped>里@import 'normalize.css'→ Webpack/Vite 把它打包进组件 CSS，顺序错乱，优先级低于全局框架样式 - 用
@import在主 SCSS 文件顶部引入normalize.css→@import权重低于同级<link>，且阻塞并行加载 - 把
normalize.css放在bootstrap.min.css之后的<link>标签中 → 层叠顺序决定胜负，后加载的赢
Bootstrap 自带重置逻辑，重复引入会冲突
Bootstrap 5 默认开启 $enable-reboot: true，它内部的 reboot 模块已做了类似 normalize 的工作：修复表单继承、统一 box-sizing、重设 body margin 和字体等。此时再额外引入 normalize.css，不是“加强”，而是制造冗余和潜在冲突。
正确做法是二选一：
立即学习“前端免费学习笔记（深入）”；
- 信任 Bootstrap 的 reboot → 删除外部
normalize.css，并通过变量微调，如修改$body-font-size或$headings-font-weight - 坚持用
normalize.css→ 在 Bootstrap Sass 中设$enable-reboot: false，并在构建入口（如main.scss）中确保@import 'normalize.css'是第一条语句
注意：reset.css 更激进，会清空所有默认 font、line-height，与 Bootstrap 的设计假设不兼容，一般不建议混用。
normalize.css 的生效依赖完整选择器链，局部引入会漏节点
normalize.css 不只是重设 h1、p 这些基础标签，它还覆盖了 svg、iframe、audio、video、::before、::after 等易被忽略的节点。这些规则只有在全局作用域、最高层叠上下文中才可靠生效。
比如这个关键修复：
button, input, select, textarea {
font: inherit;
line-height: normal;
}如果这段只出现在某个组件样式里，而该组件没用到 select，那整个项目里的 select 仍可能继承断裂——因为 normalize.css 的原始规则没命中。
所以它必须作为「基线定义者」存在，而不是「按需补丁」。
顺序错了，等于没加；但顺序对了，也不代表万事大吉
即使你把 normalize.css 放在 <head> 最前面，仍可能失效：
- CSS-in-JS 库（如 Emotion）默认插入 style 标签在 body 底部 → 必须显式配置
prepend: true，否则它永远晚于<link> - 某些 SSR 框架（如 Nuxt）会在服务端注入重复的
normalize.css标签 → 导致客户端多加载一次，引发 FOUC 或计算异常 - CDN 加载失败时没有 fallback → 建议用
onerror回退内联最小化版本，至少保底* { box-sizing: border-box; }
真正容易被忽略的，不是“要不要加”，而是“它是否在渲染第一帧前、在任何自定义样式执行前，已完整注入并解析完毕”。这一步卡住，后面所有调试都得先问自己：我是在调自己的 bug，还是在调浏览器 UA 样式的残影？
