使用 box-sizing: border-box 可提升布局可控性，其将 padding 和 border 纳入元素宽高计算，避免内容区域意外溢出；默认的 content-box 模式下，宽高仅含内容，易致实际尺寸超出预期；应用 border-box 后，设定的宽高即为总占用空间，内容区自动调整；推荐通过 , ::before, *::after { box-sizing: border-box; } 全局启用，确保一致性；在 Flexbox 与 Grid 布局中，子元素即使有内边距和边框也能准确分配空间，提升响应式设计效率。
在CSS中使用 box-sizing: border-box 能显著提升布局的可预测性和控制力，尤其在处理响应式设计或复杂网格结构时。它改变了元素宽高的计算方式，让开发更直观、更少“意外”。
理解 box-sizing 的默认行为
默认情况下，所有元素的 box-sizing: content-box。这意味着你设置的 width 和 height 仅指内容区域，不包括 padding 和 border。例如：
width: 200px;padding: 10px;
border: 5px solid #000;
实际占据的宽度是：200 + 10×2 + 5×2 = 230px。这种累积容易导致布局错位，尤其在栅格系统中。
使用 border-box 统一尺寸计算
将 box-sizing: border-box 应用于元素后，width 和 height 包含了 content、padding 和 border。上面的例子中，即使加了内边距和边框，元素总宽仍是 200px，内容区域自动压缩。
立即学习“前端免费学习笔记（深入）”；
这使得布局更可控，特别适合：
- 栅格系统中列宽精确匹配容器
- 表单控件（如 input）在不同设备上保持一致尺寸
- 避免因 padding 导致的换行或溢出
全局应用的最佳实践
推荐在项目一开始就为所有元素设置 border-box：
*, *::before, *::after {box-sizing: border-box;
}
这样能确保所有元素遵循统一的盒模型规则。之后再定义组件时，无需反复计算 padding 和 border，直接按视觉总宽设定即可。
结合 Flexbox 和 Grid 更高效
在 Flex 或 Grid 布局中，子元素常需要等分空间。使用 border-box 可避免因内边距破坏比例。例如：
.container {display: flex;
}
.item {
flex: 1;
padding: 20px;
border: 2px solid #ccc;
}
即使有 padding 和 border，每个 item 仍能均匀分配父容器空间，不会超出。
基本上就这些。一旦启用 border-box，你会发现布局更直观，调试更少，响应式适配也更顺畅。
