本文详解 div 在响应式缩放时意外溢出 body 并触发水平滚动条的根本原因，指出 padding 未被包含在默认 content-box 盒模型宽度内是关键，并提供基于 box-sizing: border-box 和合理媒体查询阈值的可靠解决方案。
本文详解 `div` 在响应式缩放时意外溢出 `body` 并触发水平滚动条的根本原因，指出 `padding` 未被包含 in 默认 `content-box` 盒模型宽度内是关键，并提供基于 `box-sizing: border-box` 和合理媒体查询阈值的可靠解决方案。
在 CSS 默认盒模型（box-sizing: content-box）下，元素的 width 仅指内容区宽度，不包含 padding 和 border。你为 <div> 设置了 <code>width: 950px 和 padding: 3em（约 48px 上下 + 48px 左右，取决于字体大小），这意味着该 div 的实际总宽度 = 950px + 左右 padding ≈ 950px + 96px > 1046px——远超视口宽度，也超出 body 的可用空间。
由于 body 默认具有 display: block 且无 overflow-x: hidden，当子元素总宽度超过 body 内容区时，浏览器会强制添加水平滚动条，并允许 div 向右“溢出”，导致你观察到它突破蓝色 body 边框的现象——这并非 body 自身异常，而是其子元素因盒模型计算溢出所致。
✅ 正确解法是统一采用 border-box 盒模型：
* {
box-sizing: border-box;
}此时 width: 950px 将涵盖内容、内边距和边框，padding: 3em 不再额外增加总宽度，div 真实占用宽度严格控制在 950px 内。
同时，媒体查询断点需留出余量。原 max-width: 950px 刚好与 div 宽度相等，但因 body 默认有 margin（虽已设为 0）、可能存在的用户代理样式或四舍五入渲染误差，建议将断点微调至 952px 或更高（如 960px），并配合 width: auto 让 div 在小屏下自然收缩：
@media screen and (max-width: 952px) {
div {
width: auto; /* 允许根据容器自动适应 */
padding: 1.5em; /* 可选：小屏下调小 padding 提升可读性 */
}
}⚠️ 注意事项：
- 避免仅依赖
width: auto而忽略盒模型——若未设box-sizing: border-box，auto宽度仍会因padding导致不可控膨胀； -
body的margin: 0必须显式声明（部分浏览器默认有8px），但更推荐用* { margin: 0; padding: 0; }重置（生产环境建议使用normalize.css或reset.css）； - 使用开发者工具的“Computed”面板验证元素实际尺寸，重点关注
width、padding和border的叠加效果。
总结：溢出本质是盒模型理解偏差。box-sizing: border-box 是现代响应式布局的基石，配合合理断点与语义化媒体查询，即可彻底消除非预期滚动与边界突破，实现真正可控的流式设计。
