<p>默认 content-box 导致 width 不含 padding 和 border，引发溢出、换行等问题；全局设 , ::before , *::after { box-sizing: border-box } 可解决，但需注意 Flex/Grid 中 width 被忽略及第三方库覆盖。</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，结果内容区被压缩到负数宽度（尤其当父容器窄时）
全局启用 border-box 的正确写法
别一个个元素去加，工程上只认这一行：
*, *::before, *::after {
box-sizing: border-box;
}
必须带上 *::before 和 *::after，否则伪元素（比如用 ::after 清浮动或做装饰）仍走 content-box，悄悄破坏布局。
立即学习“前端免费学习笔记（深入）”；
- 前缀已非必需：
-webkit-box-sizing和-moz-box-sizing在 IE8+ 及现代浏览器中可省略 - 顺序很重要：这条规则得放在所有自定义样式之前，否则会被后续声明覆盖
- 第三方 UI 库（如 Ant Design、旧版 Bootstrap）可能用
!important强制content-box，需单独覆盖：.ant-btn { box-sizing: border-box; }
border-box 生效但“没感觉”的常见原因
有时候你明明写了 box-sizing: border-box，却觉得“没起作用”，大概率是因为布局上下文覆盖了它的表现逻辑：
- Flex 容器中，子项若设
flex: 1，width被忽略，此时box-sizing虽生效，但你看到的宽度由flex-basis决定 - Grid 项设了
grid-column: span 2，width同样不主导尺寸，box-sizing只影响该格子内部的padding/border占位 - 调试时别只看 Styles 面板里的声明，要去 Computed 面板确认
width值是否已包含padding和border
真正容易被忽略的是：box-sizing 只改 width/height 的计算逻辑，它不碰 margin，也不修复父容器塌陷或相邻 margin 合并——这些得靠别的手段处理。你得清楚自己是在控制“盒子边界”，还是在协调“盒子之间关系”。
