border-box使百分比宽度包含padding和border，设置width:50%时总宽为父容器50%，内容区自动压缩，避免溢出，提升响应式布局稳定性。
在CSS中，border-box 是 box-sizing 属性的一个值，它改变了元素宽度的计算方式。当使用百分比设置宽度时，border-box 的处理方式非常直观且实用。
border-box 对百分比宽度的影响
当一个元素的 box-sizing 设置为 border-box 时，元素的 width 属性所设置的值（无论是像素还是百分比）会包含内容区、内边距（padding）和边框（border），但不包括外边距（margin）。
这意味着：如果你给一个元素设置 width: 50% 且 box-sizing: border-box，那么这个 50% 不仅是内容区的宽度，而是整个“盒子”的总宽度 —— 包括 padding 和 border。
实际示例说明
假设父容器宽度为 400px：- 子元素设置
width: 50%，padding: 20px，border: 5px solid - 若
box-sizing: border-box：- 总宽度 = 50% × 400px = 200px
- 浏览器自动将内容区宽度缩减为：200px - 2×20px (padding) - 2×5px (border) = 150px
- 若
box-sizing: content-box（默认）：- 内容区宽 50% = 200px
- 加上 padding 和 border 后，总宽度变为：200 + 40 + 10 = 250px，超出预期布局
使用 border-box 布局更可控
在响应式设计中，使用百分比宽度配合 border-box 能避免盒子溢出父容器，特别适合栅格系统或弹性布局。
立即学习“前端免费学习笔记（深入）”；
推荐在全局重置样式中统一设置：
* {
box-sizing: border-box;
}这样所有元素都遵循相同的盒模型规则，百分比宽度更容易预测和控制。
基本上就这些，border-box 让百分比宽度真正“按需分配”，无需手动减去 padding 和 border，提升布局稳定性。
