全局设置 *, *::before, *::after { box-sizing: border-box; } 可使所有元素宽高包含 padding 与 border，避免 content-box 下 width 计算偏差导致溢出、错位等问题，尤其在表单、Flex/Grid、伪元素及动态样式中至关重要。
直接全局设置 *, *::before, *::after { box-sizing: border-box; }，就能让所有元素的 width 和 height 包含 padding 与 border，从根源上消除“设了 200px 却占 224px”的错位。
为什么 content-box 下 width 总是算不准
浏览器默认用 content-box：你写的 width: 200px 只管内容区，padding: 10px 和 border: 2px 会额外加在两边。结果就是 200 + 20 + 4 = 224px —— 父容器没留余量时，立刻溢出、换行或错格。
这种偏差在响应式栅格、Flex 子项、表单控件里尤其明显：比如 input 默认有 padding 和 border，若没 box-sizing: border-box，width: 100% 准确率基本为零。
必须写全 *, *::before, *::after 才真正生效
只写 * { box-sizing: border-box; } 是常见漏点。伪元素（如清除浮动的 ::after、图标装饰的 ::before）不继承该声明，仍按 content-box 计算，一不小心就撑破容器。
立即学习“前端免费学习笔记（深入）”；
- 务必把这条规则放在所有 CSS 文件最顶部，避免被 Normalize.css 或 UI 库覆盖
- 检查开发者工具中目标元素的
box-sizing是否被划掉——被划掉说明优先级不够 - 第三方组件（如 Ant Design、Element Plus）可能重置过
box-sizing，需手动确认 computed style
表单控件和 Flex/Grid 中的特殊注意点
input、select、textarea 在 Safari 和旧版 Edge 中对 box-sizing 的解析不稳定，即使全局设置了，也可能因默认 padding 值不一致导致横向滚动条或高度跳变。
- 显式声明更稳妥：
input, select, textarea, button { box-sizing: border-box; } - Flex 子项设了
flex-basis: 200px又带padding: 12px和border: 2px？没box-sizing: border-box就是 228px，可能挤垮整行 - Grid 的
grid-template-columns不受box-sizing影响轨道划分，但每个单元格的可用内容区大小会变 ——border-box让min-width更可控
IE8 兼容和 Shadow DOM 场景下的穿透问题
IE8 支持 box-sizing，但只认 -ms-box-sizing 前缀；IE7 及以下完全不支持，无法用 CSS 修复。
- 兼容 IE8 必须写成：
-ms-box-sizing: border-box; box-sizing: border-box;（顺序不能反） - CSS-in-JS 或 Shadow DOM 中，
* { box-sizing: border-box; }无法穿透作用域，得在对应 scope 内重复声明 - 表格布局不用指望它：
border-collapse: collapse下box-sizing不起作用，单元格尺寸逻辑独立
真正容易被忽略的是：当你在 hover 时动态加 border，或用 JS 切换 border-width，哪怕只是从 0 到 1px，只要没提前用 box-sizing: border-box 锁定总宽，就会触发重排——视觉上就是“抖一下”。这不是 bug，是 content-box 的必然行为。
