box-sizing: border-box 使元素的宽度包含内容、内边距和边框；设置后 width 即为最终占用空间，内容区域自动压缩。例如 width: 200px; padding: 20px; border: 5px 时，内容宽为 150px。通过 ,::before,*::after { box-sizing: border-box; } 可全局应用，避免布局错位。适用于栅格、弹性布局及表单控件，确保带 padding 的元素精准对齐，是现代前端提升布局可控性的常用实践。
在CSS中，默认的盒模型（content-box）会让元素的宽度仅包含内容区域，而内边距（padding）和边框（border）会额外增加总尺寸。这常常导致布局错位，尤其是在响应式设计中。使用 box-sizing: border-box 可以更直观地控制元素的实际占用空间。
什么是 box-sizing: border-box？
当设置 box-sizing: border-box; 后，元素的宽度和高度将包括内容、内边距和边框。也就是说，你设定的 width 就是元素最终在页面上占据的总宽度。
例如：一个 div 设置了 width: 200px; padding: 20px; border: 5px solid black;，在 border-box 模式下，它的总宽度仍为 200px，内容区域会被压缩为 150px（200 - 2×20 - 2×5）。
如何应用 border-box 全局生效
为了避免每个元素都手动设置，推荐在 CSS 初始化时统一设置所有元素使用 border-box：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}这样，页面中所有元素及其伪元素都会采用 border-box 模型，极大提升布局可控性。
实际应用场景示例
在栅格布局或弹性盒子中，多个带 padding 的列很难精确对齐。使用 border-box 能轻松解决：
- 两个并排 div，各设 width: 50%，即使有 padding 或 border，也能完美占满一行。
- 表单输入框设置固定宽度时，添加内边距不会超出父容器。
基本上就这些。启用 box-sizing: border-box 是现代前端开发的常见实践，能显著减少布局计算错误，让样式更可预测。不复杂但容易忽略。
