根本原因是默认 box-sizing: content-box 下 width: 100% 仅指内容区宽度，padding 和 border 会额外叠加导致溢出；解决方案是使用 box-sizing: border-box，推荐全局设置 , ::before, *::after { box-sizing: border-box; }。
width: 100% + padding 溢出的根本原因
不是写错了，是浏览器默认用 box-sizing: content-box——此时 width: 100% 只管内容区，padding 和 border 会额外加在它外面。比如父宽 300px、子设 width: 100% + padding: 10px，子实际占宽就是 300px + 20px = 320px，必然溢出。
怎么切到 border-box 模式（CSS3 怪异盒模型）
把 box-sizing 改成 border-box 就行，这是唯一推荐的解法，不是“兼容旧模式”，而是让尺寸计算回归直觉。
- 单个元素：直接加
box-sizing: border-box - 全局生效（强烈建议）：
*, *::before, *::after { box-sizing: border-box; } - 注意优先级：如果框架（如 Bootstrap）或重置样式里写了
box-sizing: content-box，得用更具体选择器或!important覆盖
为什么不用 calc() 手动减 padding
calc(100% - 20px) 看似能绕过问题，但实际埋雷：
- 响应式失效：
100%在 flex/grid 容器中可能动态变化，calc()里的固定值跟不上 - 维护成本高：左右
padding不等、加了border、伪元素也需同步改，漏一处就溢出 - IE8 不支持
calc()，而box-sizing: border-box的兼容性反而更好（IE8+）
特别容易被忽略的几个点
即使加了 box-sizing: border-box，以下情况仍可能溢出：
-
margin：它永远不参与box-sizing计算，margin: 10px仍会让总宽多出 20px - 父元素有
padding：子width: 100%是按父的 content 区算的，若父padding: 20px，子 100% 实际只有 260px（父总宽 300px），再加自身padding就容易撑破 - 绝对定位元素：
position: absolute下width: 100%参照的是父的 padding box（含父 padding），不是 content box，行为和普通流不同 - 伪元素：
::before/::after如果也设了width: 100%和padding，同样要单独加box-sizing: border-box
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
