<p>border-box使元素宽高包含padding和border，避免布局溢出。响应式中确保百分比宽度稳定，配合Flexbox和Grid实现精准布局，推荐全局设置* {box-sizing: border-box;}提升一致性。</p>
在响应式布局中，box-sizing: border-box 是一个非常实用的 CSS 设置，能显著简化元素尺寸控制，避免因 padding 和 border 导致的宽度溢出问题。
什么是 border-box？
默认情况下，CSS 盒模型使用 content-box，即元素的 width 只包含内容区域，padding 和 border 会额外增加总宽度。而设置为 border-box 后，元素的 width 和 height 包含了 content、padding 和 border，使得布局更直观。
例如：
width: 200px; padding: 20px; border: 5px solid;- content-box 总宽 = 200 + 40 + 10 = 250px
- border-box 总宽 = 200px（padding 和 border 在内部计算）
在响应式布局中的优势
响应式设计常使用百分比宽度和灵活容器，border-box 能确保元素在不同屏幕下保持预期尺寸。
立即学习“前端免费学习笔记（深入）”；
- 多个浮动或弹性子元素并排时，即使加了 padding，也不会超出父容器宽度
- 使用 calc() 计算宽度时更可靠，减少意外换行或溢出
- 在移动端小屏上，避免横向滚动条出现
推荐全局设置方式
为简化开发，建议在项目开始时统一设置：
* {
box-sizing: border-box;
}
这样所有元素都遵循同一盒模型规则，减少调试时间，提升布局一致性。
结合 Flexbox 和 Grid 的实际应用
在 Flex 容器中，子项默认会收缩。若使用 content-box，内边距可能破坏等分布局。设为 border-box 后，padding 不影响主轴空间分配。
Grid 布局中，定义列宽为 1fr 时，每个格子自动填充可用空间。border-box 确保即使添加边距和边框，也不会超出网格轨道。
基本上就这些，一个小设置，带来大便利。尤其是在多设备适配场景下，border-box 几乎成了现代 CSS 布局的标配。不复杂但容易忽略。
