box-sizing: content-box 是默认盒模型，width/height 仅控制内容区，padding 和 border 额外增加；border-box 则将 width/height 视为总尺寸，padding 和 border 向内压缩内容区；全局重置为 border-box 可统一行为、降低调试成本。
box-sizing: content-box 是什么行为？
这是所有现代浏览器的默认盒模型，width 和 height 只管内容区（content）大小，内边距和边框会“额外加出去”。比如设了 width: 200px; padding: 10px; border: 3px solid;，元素实际占位宽度就是 200 + 10×2 + 3×2 = 226px。
- 适合需要严格控制内容区域尺寸的场景（如等宽文字容器）
- 但每次改
padding或border都得手动重算总宽，容易布局错位 - 响应式中配合
%宽度时，padding和border会让子元素撑出父容器
box-sizing: border-box 是怎么“省事”的？
border-box 把你写的 width 和 height 当作最终可见框的尺寸——内边距和边框从这个尺寸里“往里扣”，内容区自动收缩。上面那个例子设成 box-sizing: border-box; 后，总宽稳稳就是 200px，内容区只剩 200 − 20 − 6 = 174px 宽。
- 写栅格、卡片、表单控件时几乎必用，避免反复调整尺寸
- 和
flex/grid配合更自然，子项不会因 padding 溢出 - IE8+ 全支持，移动端无兼容问题
为什么全局重置推荐 * { box-sizing: border-box; }？
因为不加这条，每个新写的块级元素（div、section、header 等）都默认走 content-box，等于埋下布局隐患。用通配符统一切换后，所有元素行为一致，调试成本大幅下降。
- 注意：该规则不影响
svg、input[type="button"]等部分原生控件的默认行为，个别需单独覆盖 - 若项目已存在大量
content-box逻辑，切勿贸然全局重置，先用 CSS 自定义属性或 scoped class 局部迁移 - 真正要警惕的是嵌套使用：父元素
border-box，子元素又显式设content-box，容易导致尺寸预期断裂
什么时候必须保留 content-box？
极少，但真实存在：比如封装一个「纯内容容器」组件，要求其 width 必须严格等于内部文本渲染宽度（不含任何装饰），或者对接某些依赖标准模型的第三方 UI 库（如旧版 Bootstrap 3 的某些 grid 类）。
立即学习“前端免费学习笔记（深入）”；
- 不要为了“遵循规范”而坚持
content-box，W3C 早已将border-box列为正式特性 - 如果只是想模拟传统表格单元格的伸缩行为，用
table-cell显示模式比硬套content-box更可靠 - 最常被忽略的一点：
margin在两种模型中都不参与width/height计算——但它会影响兄弟元素间距，这点永远不变
