因为默认 box-sizing: content-box 将 width 视为内容宽，padding 和 border 额外增加；改用 box-sizing: border-box 可使 width 包含 padding 和 border，避免撑破父容器。
为什么 width: 200px 加了 padding 就撑破父容器？
不是 width 写错了，是默认盒模型（box-sizing: content-box）在“老实计算”：它把 width 当成纯内容宽度，padding 和 border 都额外加在上面。比如：
.box { width: 200px; padding: 10px; border: 2px solid #000; }实际总宽度 = 200 + 10×2 + 2×2 = 224px——哪怕父容器只有 200px 宽，它也照溢不误。
box-sizing: border-box 是最直接的解法
它让 width 和 height 指的是“整体盒子尺寸”，padding 和 border 往里挤内容，不往外扩边界。
* { box-sizing: border-box; } .box { width: 200px; padding: 10px; border: 2px solid #000; /* 总宽稳稳就是 200px */ }全局加这一句，90% 的 padding 溢出问题当场消失。注意：要确保没被其他样式重置掉 box-sizing，尤其检查是否被第三方库或 inline style 覆盖。
当父容器本身是 100% 宽度时，还要防 margin 偷袭
即使用了 border-box，如果父容器是 width: 100%，子元素再加 margin: 5px，总宽仍会变成 100% + 10px → 溢出。这种场景下：
- 优先用
padding替代margin（父容器可控时更安全） - 或者改用
calc(100% - 10px)手动扣掉 margin 空间 - 更现代的做法：用 Flex 布局，让父容器控制间距，子元素不设 margin
别忽略 viewport 单位（vw）和 padding 的组合陷阱
width: 100vw 看似“刚好铺满屏幕”，但一旦加 padding，还是按 content-box 计算——总宽 = 视口宽度 + 左右 padding → 必然触发横向滚动条。解决方式一样：box-sizing: border-box 必须生效；若已全局设置，就检查是否被某个选择器意外覆盖（比如 input 或 button 元素常被重置）。另外，100vw 还会包含垂直滚动条宽度（部分浏览器），如需绝对贴边，可考虑 width: 100% + position: fixed 替代。
立即学习“前端免费学习笔记（深入）”；
