width: 100%加padding溢出是因为默认box-sizing: content-box，width仅含内容区，padding和border额外增加总宽；修复需设box-sizing: border-box（含::before, ::after），或改用width: 100%替代100vw，避免margin导致的视觉溢出。
为什么width: 100%加padding就溢出
因为浏览器默认用的是 box-sizing: content-box，此时 width: 100% 只管内容区宽度，padding 和 border 是额外加在外面的。比如父容器宽 300px、左右 padding: 10px，那它的 content 区只有 280px；子元素设 width: 100% 就是 280px，再加自己 padding: 10px，总宽变成 300px + 20px = 320px → 溢出。
全局设置box-sizing: border-box要覆盖伪元素
只写 * { box-sizing: border-box; } 不够——::before 和 ::after 会继承默认的 content-box，如果它们带了 padding 或 border，照样可能撑破容器。
- 正确写法：
*, *::before, *::after { box-sizing: border-box; } - 第三方 UI 库（如 Ant Design）通常已内置该重置，重复加不冲突，但没必要
- 老项目不敢动全局？优先加在出问题的组件上，比如
.form-input { box-sizing: border-box; }
width: 100vw配padding也溢出？别硬扛，换100%
100vw 是按视口宽度算的，和父容器无关；加了 padding 后，总宽 = 视口宽 + padding，必然溢出。这不是盒模型问题，是单位选错了。
- 把
width: 100vw改成width: 100%，再确保父容器有明确宽度（比如body或html设了width: 100%） - 如果必须用
100vw（比如全屏 banner），就别加左右padding，改用margin或内部嵌套一层容器来留白 -
calc(100vw - 20px)虽然能凑合，但响应式下维护成本高，不推荐
父容器有padding时，子元素width: 100%不是真“满宽”
父元素设了 padding: 0 20px，它的 content 区就比总宽小 40px；子元素 width: 100% 是按这个 content 区算的，结果就是两边各空 20px —— 看似没溢出，实则没顶到边。
- 想视觉上“顶满”，用
width: inherit（继承父元素计算后的总宽） - 或者用绝对定位：
position: absolute; left: 0; right: 0;（注意：此时width: 100%是按父的 padding box 算的） -
margin不受box-sizing控制，它永远额外加在盒模型外面，别指望border-box能管住它
真正容易被忽略的点是：即使你加了 box-sizing: border-box，只要父容器自身有 padding，子元素的 width: 100% 就不是“占满父容器总宽”，而是“占满父容器内容区”。这时候得看设计意图——是要对齐内容区，还是对齐边框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
