设置width后元素比预期宽是因为content-box盒模型将border和padding额外计算在width之外；全局启用border-box需用,::before,*::after{box-sizing:border-box}，但table布局、替换元素等场景下失效。
为什么设置width后元素总比预期宽？
因为默认的content-box盒模型把width只算内容区，边框和内边距额外加在外部。比如设width: 200px、padding: 10px、border: 2px，实际占位是200 + 2×10 + 2×2 = 224px——这在栅格布局或精确对齐时极易错位。
怎样全局启用border-box？
最稳妥的做法是用通配符重置，但要注意box-sizing不继承，必须显式应用到所有目标元素：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 别只写
*，漏掉伪元素会导致::before/::after生成的内容仍按content-box计算 - 某些UI库（如Bootstrap）已自带类似重置，重复设置可能干扰其内部逻辑，建议先检查是否已存在
- 若项目需兼容IE8及更早版本，
box-sizing需加-webkit-前缀，但IE8仅支持无前缀写法，实际中基本可忽略
哪些场景下不能依赖border-box？
当元素使用table相关display值（如table-cell、table-row）时，box-sizing会被忽略，浏览器强制按content-box渲染。
-
display: table-cell常用于水平等高布局，此时若设padding，宽度仍会外扩 - 解决办法：改用
flex或grid替代表格布局；或在外层套一层div并设border-box，把padding移到外层 -
iframe、video、canvas等替换元素也无视box-sizing，它们的尺寸由自身属性（如width、height）直接控制
为什么有时候border-box没生效？
常见原因是CSS优先级或作用域问题，尤其在组件化开发中：
立即学习“前端免费学习笔记（深入）”；
- 第三方组件内联了
style="box-sizing: content-box"，会覆盖你的CSS规则 - 使用CSS-in-JS时，若未将
box-sizing写入组件样式对象，它不会自动继承全局重置 - 某些重置CSS（如Normalize.css）不包含
box-sizing设置，需手动补全 - 检查计算后的样式：在DevTools中看
box-sizing是否显示为border-box且状态为“已应用”，而非“被覆盖”
真正麻烦的不是设不设border-box，而是它在混合布局中失效时，你得一层层查到底是哪个display值或哪条样式把它绕过去了。
