<p>必须全局设置 { box-sizing: border-box; } 及 ::before, *::after { box-sizing: border-box; }，并单独重置表单控件和第三方组件，否则 padding/border 会导致宽度溢出、换行及 JS 尺寸计算错误。</p>
因为不设 box-sizing: border-box，你写的 width: 100% 或 width: 200px 就不是它实际占的宽度——padding 和 border 会偷偷加在外面，布局错位、溢出、换行全是它惹的祸。
为什么 content-box 下 width 总是“不准”
浏览器默认用 content-box 解析尺寸：你设 width: 200px，它只管内容区；再加 padding: 12px 和 border: 1px，实际占宽变成 200 + 24 + 2 = 226px。父容器没预留这 26px，子元素就必然溢出或换行。
- 两个
width: 50%的盒子并排，只要其中任意一个有padding或border，总宽立刻超 100%，直接变成两行 -
input[type="text"] { width: 100%; padding: 8px; }在content-box下必溢出，触发横向滚动条 - Flex 项写了
flex: 1还加了padding: 16px，结果内容区被压缩到负数宽度（尤其当父容器窄时）
全局重置必须带 *::before 和 *::after
伪元素不继承 box-sizing，默认仍走 content-box。只写 * { box-sizing: border-box; } 是不够的——::after 清浮动、::before 做装饰图标时，尺寸计算会悄悄偏离预期。
-
* { box-sizing: border-box; }覆盖不了伪元素，因为它们不是真实 DOM 节点，不匹配* -
*::before, *::after是独立选择器，必须显式声明才能生效 - 漏掉它们是很多“明明设了
border-box却还在换行/溢出”的真实原因
表单控件和第三方库是最大漏网之鱼
box-sizing 不继承，且原生表单控件在不同内核中默认值混乱：Safari 的 input[type="search"] 默认仍是 content-box，Vant 的 van-field 内部 input 若没显式设，就按宿主浏览器默认走。
立即学习“前端免费学习笔记（深入）”；
- 必须单独覆盖：
input, textarea, select, button { box-sizing: border-box; } - Ant Design、NutUI 等库若用了
!important强制content-box，得用更具体选择器覆盖，比如.nut-button { box-sizing: border-box !important; } - 某些 UI 库（如 Bootstrap 5+）已内置该重置，重复声明不会报错，但可能干扰调试逻辑
box-sizing 切换会破坏 JS 尺寸读取逻辑
如果你的代码里用了 element.offsetWidth、getBoundingClientRect() 或基于 clientWidth 做动态计算（比如拖拽缩放、弹窗定位），切换到 border-box 后，这些值会变小——因为现在它们返回的是“含 padding + border”的总宽，而不是 content-box 下的“纯内容宽 + 额外累加”。
- 检查所有涉及尺寸判断的 JS：特别是表单校验提示位置、Tooltip 自动翻转、Canvas 绘图区域映射
- 不要在
:hover或动画中动态切换box-sizing：transition对它无效，只会触发 layout thrashing - 调试技巧：在 DevTools 里临时删掉全局规则，对比
offsetWidth值变化
真正容易被忽略的是：box-sizing 只改 width/height 的计算逻辑，它不碰 margin，也不修复父容器塌陷或相邻 margin 合并——这些得靠别的手段处理。你得清楚自己是在控制“盒子边界”，还是在协调“盒子之间关系”。
