box-sizing: border-box 能防止 padding 撑开盒子宽度，因其使 width 包含 padding 和 border；默认 content-box 下 width 仅限内容区，加 padding/border 后总宽超预期，导致溢出或错位。
直接设 box-sizing: border-box 就能防止 padding 撑开盒子宽度，但必须确保它生效——很多人写了却没起作用，问题往往出在选择器优先级或继承链上。
为什么 padding 会撑开盒子宽度
默认盒模型是 content-box，此时 width 只管内容区域。一旦加了 padding 或 border，浏览器会把它们额外加到总宽上。比如 width: 200px; padding: 10px;，实际占位就是 220px（左右各 10px），容易导致父容器溢出或布局错位。
box-sizing: border-box 怎么写才真正生效
不能只靠局部声明，得从根上控制继承路径：
- 全局统一推荐写法：
* { box-sizing: border-box; }但注意：这个规则优先级低，如果后续有更具体的选择器（如div { box-sizing: content-box; }）会把它覆盖掉 - 更稳妥的写法是绑定到根元素：
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }这样所有元素都继承border-box，且子元素的伪元素也一并纳入 - 若需对某类元素单独还原为标准模型，必须用足够高优先级覆盖，例如：
.legacy-input { box-sizing: content-box !important; }，仅靠div.input { box-sizing: content-box; }很可能被上面的*规则压住
哪些场景下 border-box 会“失效”
不是属性没起作用，而是计算逻辑被其他样式干扰：
立即学习“前端免费学习笔记（深入）”；
-
width设为auto或fit-content时，box-sizing不影响最终尺寸——它只约束你显式设置的width/height如何分配空间 - 弹性布局（
display: flex）中，子项的flex-basis若设为具体值（如200px），则box-sizing仍生效；但若设为auto，就退回到内容宽度 + padding + border 的行为 - 表格单元格（
td,th）和替换元素（如img,input）在部分旧版浏览器中对box-sizing支持不稳定，建议显式重置：img, input { box-sizing: border-box; }
兼容性与脚本读取的细节
IE8+ 全支持 box-sizing，无需前缀；但 JS 里读取时要注意：
- 用
getComputedStyle(el).boxSizing获取的是计算后值（字符串），不是原始声明 - 通过 JS 设置需用驼峰：
el.style.boxSizing = 'border-box';，不能写成box-sizing - 动态插入的元素（如
document.createElement('div')）不会自动继承全局*规则，必须手动设或依赖父容器的inherit
最常被忽略的一点：box-sizing 只影响元素自身的尺寸计算，对子元素的布局无直接影响；如果你发现改了它还是撑开，大概率是父容器用了 display: inline-block 或存在未清除的浮动，而不是 box-sizing 没生效。
