全局设置 box-sizing: border-box 是解决宽度计算偏差最有效方式，但需正确书写、放置位置并预留例外；伪元素须一并设置，且规则须置于所有自定义样式之前，表单控件等特殊场景需手动重置为 content-box。
直接结论：全局设置 box-sizing: border-box 是解决宽度计算偏差最有效、最省事的方式，但必须写对、放对位置、并留出例外出口。
为什么 content-box 会让 width 失控
浏览器默认用 content-box 解析尺寸：你写 width: 200px，它只管内容区；再加 padding: 12px 和 border: 1px solid，实际占宽变成 200 + 24 + 2 = 226px。这种“悄悄变胖”在以下场景立刻暴露：
- 两个
width: 50%的盒子并排，因 padding/border 撑开，直接换行 -
overflow: hidden压不住横向滚动条，因为真实宽度已超100% - Flex 容器中子项设了
flex: 1又写width: 100%+padding，内容区被压缩到负数 - Grid 的
grid-template-columns: 1fr 200px，那个200px列含padding: 10px就实际占220px，破坏等分逻辑
全局设置 border-box 的正确写法
不能只写 * { box-sizing: border-box; }——伪元素（::before、::after）仍走 content-box，它们生成的内容可能撑破布局。
必须包含伪元素，且优先级要稳：
*, *::before, *::after {
box-sizing: border-box;
}
注意事项：
- 这条规则必须放在所有自定义样式之前，否则会被后续声明覆盖
- 现代项目中无需加
-webkit-或-moz-前缀（IE8+ 原生支持，当前环境已放弃 IE7–8） - 如果用了 Bootstrap 等第三方库，需确保该规则在它们的 CSS 之后加载，或用
html * { box-sizing: border-box !important; }临时调试（上线前务必移除）
哪些地方不能盲目套用 border-box
box-sizing 不继承，但全局设置后影响是隐性的。以下场景需特别注意：
-
<textarea></textarea>、<input type="text">等表单控件在旧版 Safari 或某些 Android WebView 中对box-sizing支持不稳定，建议单独重置：input, textarea { box-sizing: content-box; } - 用
background-clip: content-box或border-image的元素，视觉边界可能与预期不一致，需人工校验 - JS 动态读取
offsetWidth或getBoundingClientRect()并做尺寸计算的代码，若原先按content-box逻辑编写，切换后需同步检查是否需调整
想局部切回 content-box 怎么写
因为 box-sizing 不继承，也不能靠父级“传下来”，必须显式重写，且优先级要高于通配符：
- 错误写法：
.legacy { box-sizing: content-box; }—— 与*同优先级，会被覆盖 - 正确做法：
div.legacy, .legacy-input { box-sizing: content-box; }（提升选择器 specificity） - 极少数动态场景可用内联样式：
<div style="box-sizing: content-box"><p>真正麻烦的不是设 <code>border-box，而是设了之后忘了它对所有后续尺寸计算的隐性影响——比如一个width: 100%的容器，里面嵌套了带padding的子项，你以为它会撑开，其实不会；但 JS 里读clientWidth却以为它还是 content-box 那套逻辑，结果算错。
