width: 100%加padding超宽是因content-box下width仅指内容区，padding额外叠加；须全局设, ::before, *::after { box-sizing: border-box }并验证生效，再针对性处理img、input等替换元素及min-width: 0等问题。
因为默认盒模型是 box-sizing: content-box，width 只管内容区，padding 和 border 会额外叠加在它外面——这不是写错了，是浏览器按规范执行的结果。
为什么 width: 100% 加了 padding 就超宽？
你写 width: 100%，浏览器理解为“内容区占父容器 100%”，再加左右 padding: 16px，实际宽度就是 100% + 32px。父容器没预留这 32px，自然撑破。
- 常见现象：横向滚动条意外出现、Flex 子项被挤到下一行、卡片右侧文字被切掉
- 哪怕父容器是
display: flex且设了width: 100%，子元素仍按自己的盒模型算尺寸，不自动“让出”内边距空间 -
margin不参与盒模型计算，所以加margin同样会撑开总宽，但它和padding的作用机制不同——前者在盒子外，后者在盒子内
box-sizing: border-box 真的能压住 padding 吗？
能，但必须确保它真正生效，且覆盖所有可能参与布局的节点。
- 只写
* { box-sizing: border-box; }不够——伪元素::before和::after默认仍是content-box，得显式加上：*, *::before, *::after { box-sizing: border-box; } - 第三方 UI 库（如旧版 Ant Design）可能在组件内部强制设了
box-sizing: content-box，会覆盖你的全局规则，需单独加固：input, textarea, button { box-sizing: border-box; } - 在 DevTools 的「Computed」面板里查目标元素的
box-sizing值，确认是border-box；再看「Metrics」面板，手动增减padding，观察总宽度是否稳定不变
加了 border-box 还撑破？重点查这三类漏网之鱼
box-sizing 只改尺寸计算逻辑，不约束内容本身是否溢出。以下情况即使开了 border-box，也必须额外处理：
-
<img>、<svg></svg>、<iframe></iframe>：它们是替换元素，天然无视父容器宽度限制，必须显式加max-width: 100%和height: auto - 表单控件（
<input>、<button></button>）在 Flex 容器中：默认min-width: auto会阻止收缩，得加min-width: 0才能随容器压缩 - 含
white-space: nowrap的文本：盒模型再准也没用，得配overflow: hidden+text-overflow: ellipsis，且确保父容器有明确宽度来源（比如width: 100%或flex-basis稳定）
真正容易被忽略的，是 max-width 和 min-width 同样受 box-sizing 控制——很多人只改了 width，结果 max-width: 400px 依然被 padding 推爆，因为没意识到它也走同一套计算规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
