CSS设置width:100%后加padding溢出，是因为默认盒模型计算方式导致的。解决方法是切换为CSS3怪异盒模型模式（box-sizing:border-box）。

CSS中设置width:100%后因padding导致溢出，根源在于浏览器默认采用content-box盒模型——此时width仅控制内容区宽度，padding和border会额外叠加，使元素实际尺寸超出父容器；最根本、高效且兼容性良好的解决方案是启用border-box盒模型（box-sizing: border-box），推荐通过全局重置*、*::before、*::after统一应用，它让width真正代表元素总宽，彻底回归直观的尺寸预期，远优于易出错、响应式不友好且兼容性差的calc()手动计算，同时需注意margin、父级padding、绝对定位及伪元素等特殊场景仍需单独处理。

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

理论要掌握，实操不能落！以上关于《CSS设置width:100%后加padding溢出，是因为默认盒模型计算方式导致的。解决方法是切换为CSS3怪异盒模型模式（box-sizing:border-box）。》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！