<p>Bootstrap 5 的 Reboot 必须用 :where(:root) { box-sizing: border-box; } 加 ::before, ::after 组合重置，而非 * { box-sizing: border-box; }，因后者会污染 iframe、canvas、svg 等依赖 content-box 的原生容器，引发 Android WebView 崩溃、图表库变形等问题。</p>
Bootstrap 5 的 reboot.css 必须包含 box-sizing 全局重置，否则几乎所有布局都会在不同浏览器间错位——这不是可选项，是底线要求。
为什么不能只写 * { box-sizing: border-box; }
看似最简的写法反而最容易出问题：
-
*会污染iframe、canvas、svg等原生容器，它们依赖content-box行为来正确渲染尺寸 - 某些 Android WebView（尤其旧版）遇到
* { box-sizing: border-box; }会直接崩溃或白屏 - 第三方组件库（如某些图表库）若内部封装了
svg并设了width属性，会被该规则强制挤压变形
Bootstrap 5 改用：:where(:root) { box-sizing: border-box; } + *::before, *::after { box-sizing: border-box; }，前者靠 :where() 降权避免覆盖第三方样式，后者确保伪元素也纳入控制。
为什么必须在所有自定义 CSS 之前加载 reboot.css
box-sizing 是继承属性，但不支持从父级自动继承到子级伪元素；更重要的是：
立即学习“前端免费学习笔记（深入）”；
- 如果你的
custom.css里写了div { box-sizing: content-box; }，而它在reboot.css后加载，那这个 div 就真变成content-box了 - Bootstrap 自身组件（如
.btn、.form-control）的尺寸计算全部基于border-box，一旦被覆盖，按钮宽度溢出、输入框高度塌陷就会立刻出现 - DevTools 的「Computed」面板里看到
box-sizing: border-box，不代表它生效了——得确认width和computed width数值一致，否则就是被覆盖了
哪些元素必须保留 content-box？
不是所有地方都适合 border-box，Bootstrap 5 显式排除了几个关键场景：
-
input[type="range"]：它的滑块轨道渲染逻辑依赖content-box，手动设成border-box会导致拖动区域错位 -
svg元素带内联width属性时，在旧版 Android 浏览器中仍可能忽略max-width: 100%，需额外加display: block - 封装
canvas的容器：若外部传入的width必须严格等于绘图区域，就不能让padding挤占内容区
这些例外不是 bug，而是浏览器底层渲染机制决定的硬约束——强行统一反而破坏功能。
真正容易被忽略的点是：box-sizing 冲突往往不会报错，只会让卡片换行、表单对不齐、响应式断点偏移几像素。这些问题通常要等到上线后用户反馈才暴露，调试时得盯着 DevTools 的 computed width 看，而不是只信代码里写的 width 值。
