content-box 使流式布局计算变麻烦，因 width 百分比与 padding/border 固定值混算导致实际宽度失控；border-box 则让 width 即总宽，padding 和 border 从中扣除，确保布局可控。
为什么 content-box 会让流式布局计算变麻烦
你写 width: 50%，本意是“占父容器一半”，但默认 content-box 下，只要加 padding: 16px 和 border: 1px，实际宽度就变成 50% + 32px + 2px——百分比和固定值混算，结果不可控。两栏并排时直接换行，三列网格里最后一列掉下去，表单 input 溢出父容器拉横向滚动条，都是这个逻辑在捣鬼。
全局启用 border-box 的标准写法
不是只给 div 或 .container 加，而是覆盖所有可能参与布局的节点：
*, *::before, *::after {
box-sizing: border-box;
}
- 必须包含
*::before和*::after，否则伪元素（比如用::after清浮动或画装饰线）会意外退回content-box - 不要写成
html *或body *，层级太深影响性能，*在现代浏览器中已足够高效 - 这条规则建议放在 CSS 文件最顶部，确保不被第三方库（如旧版 Bootstrap）的重置样式覆盖
border-box 对 calc() 和百分比的真实影响
border-box 不改变 calc() 的语法，但让它的结果真正“所设即所得”：
.card {
width: calc(50% - 20px);
padding: 16px;
border: 1px solid #ccc;
}
- 在
border-box下，calc(50% - 20px)就是最终总宽，padding和border从这宽度里扣，内容区自动收缩 - 在
content-box下，同一段代码实际宽度是calc(50% - 20px + 34px)（32px padding + 2px border），calc()的减法意义被完全抵消 - 百分比布局同理：
width: 33.33%的三列，加任意padding都不会破行，因为每列都严格守着 33.33% 的边界
哪些地方仍要手动检查 box-sizing
全局规则不是银弹，这些场景容易漏：
- 第三方 UI 组件（如 Ant Design v4 之前、Element UI）可能在组件内部强制设了
box-sizing: content-box，要用 DevTools 看 computed 样式确认 -
<input>、<textarea></textarea>等原生表单控件，在部分浏览器（如旧版 Safari）中默认未继承box-sizing，需单独补声明 - 内联样式里写了
style="box-sizing: content-box"，会覆盖全局规则，排查时注意 HTML 中的style属性 - 表格单元格（
td、th）在 IE11 及更早版本中对border-box支持不稳定，关键布局建议额外加td, th { box-sizing: border-box; }
真正容易被忽略的是：全局规则生效后，你写的 width 和 height 就是最终渲染尺寸，但内容区域变小了——如果依赖 JS 动态读取 clientWidth 做计算，得意识到它现在包含 border 和 padding，别再按 content-box 逻辑去减。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
