使用 box-sizing: border-box 可解决百分比 width 与 padding 导致的布局溢出问题，使 padding 在 width 内部计算，推荐全局设置 *{box-sizing:border-box} 以确保响应式设计中尺寸计算更可控，配合百分比实现弹性布局。
在CSS中使用百分比设置 width 和 padding 时，配合响应式设计很常见，但需要注意盒模型的默认行为会导致布局超出预期宽度。这是因为默认的 box-sizing: content-box 会让 padding 添加到 width 之外。
问题说明：width% + padding% 超出容器
例如：
.box {
width: 50%;
padding: 5%; /* 实际宽度变成 50% + 左右各5% = 60% */
}
此时元素总宽为 60%，可能破坏栅格或导致换行。
解决方案：使用 box-sizing: border-box
将盒模型改为 border-box，使 width 包含 padding 和 border：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 50%;
padding: 5%;
box-sizing: border-box;
}
现在，即使设置了 padding: 5%，元素总宽度仍为 50%，padding 从 width 内部“扣除”，避免溢出父容器。
响应式布局中的推荐写法
在移动端优先或响应式设计中，建议统一设置：
- 对所有元素应用 box-sizing: border-box
- 使用百分比 width 配合百分比 padding 实现弹性间距
通用重置写法：
*,
*::before,
*::after {
box-sizing: border-box;
}
然后可以安全地使用：
.column {
width: 33.33%;
padding: 2%;
float: left;
}
每个列占据三分之一宽度，内边距由内部空间分配，不会影响整体布局流。
注意事项
百分比 padding 是相对于父元素的宽度计算的，即使设置在 padding-top 或 padding-bottom 上也是如此。这一点常用于创建等比例容器（如响应式图片盒子）：
.aspect-ratio-box {
width: 100%;
padding-top: 75%; /* 高度为宽度的75%，实现 4:3 比例 */
position: relative;
}
基本上就这些。关键是启用 border-box，就能放心用百分比控制响应式尺寸和留白。
