box-sizing: border-box 可解决元素尺寸超出预期的问题。它使 width 和 height 包含内容、内边距和边框，确保设置的宽度即实际占用空间。默认的 content-box 模式下，padding 和 border 会增加元素总尺寸，易导致布局错乱。通过 ,::before,*::after { box-sizing: border-box; } 全局设置，可统一盒模型行为，提升布局可预测性，简化响应式设计与栅格系统适配，减少调试成本。现代浏览器广泛支持，仅需注意极少数旧版本兼容问题，特殊需求可局部重置为 content-box。
在网页布局中，元素的宽度和高度经常因为内边距（padding）和边框（border）的加入而超出预期，导致页面排版错乱。解决这个问题的关键是使用 box-sizing: border-box。
box-sizing 是什么？
CSS 中的 box-sizing 属性用于定义元素的宽度和高度如何计算。默认值是 content-box，这意味着设置的 width 和 height 只包含内容区域，不包括 padding 和 border。一旦添加内边距或边框，元素实际占用的空间就会变大。
例如：一个 div 设置了 width: 100px; padding: 10px; border: 5px solid; 实际宽度会变成 100 + 20 + 10 = 130px（左右各10px内边距，各5px边框）。
当设置为 border-box 时，width 和 height 包含了内容、内边距和边框。也就是说，上面的例子中即使加了 padding 和 border，总宽度仍为 100px，内容区域会自动压缩。
立即学习“前端免费学习笔记（深入）”；
如何统一应用 border-box？
为了在整个项目中实现内外间距的统一计算方式，推荐在全局样式中对所有元素设置 box-sizing: border-box，同时使用继承机制避免个别元素出错。
以下是推荐的通用重置写法：
*,
*::before,
*::after {
box-sizing: border-box;
}
这段代码的意思是：选择页面上所有元素及其伪元素，统一使用 border-box 模式。这样可以确保每个盒子的尺寸更容易控制，尤其在响应式布局或栅格系统中非常有用。
为什么这样做更高效？
- 布局更 predictable（可预测）：设定的宽度就是最终占据的空间，不会因 padding 或 border 而撑开。
- 简化计算：无需手动减去 padding 和 border 来保持容器对齐。
- 适配栅格系统友好：在使用 12 列布局等场景下，列宽能精准匹配父容器。
- 减少调试时间：避免出现“为什么超出父容器？”这类常见问题。
注意事项
虽然 border-box 带来很多便利，但要注意旧版本 IE 的兼容性（IE8 及以上支持）。现代开发中基本无需担心，可通过构建工具或前缀处理兼容需求。
如果某些特殊组件需要 content-box 行为，可以单独重置：
.special-element {
box-sizing: content-box;
}
基本上就这些。只要在项目一开始就引入全局 box-sizing: border-box，就能大幅降低布局混乱的风险，让内外间距管理更加直观统一。
