<p>box-sizing: border-box 是唯一可靠解法，因默认 content-box 下 width: 100% 仅指内容区宽，padding 和 border 额外叠加必致溢出；需全局设置 * { box-sizing: border-box; } 并覆盖伪元素，且须通过 Computed 面板验证生效。</p>
box-sizing: border-box 是唯一可靠解法，不加它，width: 100% 遇到 padding 必然溢出——这不是 bug，是 content-box 的默认行为。
为什么 width: 100% 加 padding 就会溢出
浏览器默认用 box-sizing: content-box，此时 width: 100% 只管内容区宽度，padding 和 border 会额外加在外部。比如父容器总宽 400px、左右 padding: 20px，那它的 content 区只有 360px；子元素设 width: 100% 就只占 360px，再叠上自身 padding: 10px，实际总宽就变成 360px + 20px = 380px —— 看似安全，但若再加 border: 1px，就变成 382px；一旦父容器没设 padding，而子元素又用了 margin，立刻超限。
常见错误现象包括：max-width: 100% 失效、水平滚动条意外出现、flex 子项错位、表单控件挤出卡片边界。
怎么让 box-sizing: border-box 真生效
写了不等于起作用。必须进浏览器开发者工具，切到「Computed」面板，直接查目标元素的 box-sizing 值——这是唯一可信依据。
立即学习“前端免费学习笔记（深入）”；
- 常见失效原因：
!important或更高优先级规则覆盖了你的设置 - CSS-in-JS 库（如
styled-components）SSR 注入顺序错乱，导致首屏闪动 - 框架（如 Bootstrap）自己重写了
box-sizing，但没包含::before/::after，导致伪元素仍按content-box计算
建议全局重置：
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }否则子元素或伪元素仍可能按默认模型计算。
box-sizing: border-box 修好了，为什么还溢出
box-sizing 只影响 width/height、padding、border 的归属关系，对 margin 完全无效——它永远算在总尺寸之外。
- 如果溢出是因为
margin: 0 10px，加了border-box没用 - 绝对定位元素的
width: 100%是按父的padding box计算的（含父padding），不是content box，这点容易误判尺寸 -
table和td默认无视box-sizing，必须显式声明box-sizing: border-box才生效 -
flex或grid子项若设了min-width: auto（img、input默认值），即使box-sizing正确，也得配min-width: 0才能防撑开
真正容易被忽略的是：父容器若有 padding，子元素写 width: 100% 并非“顶到父边缘”，而是对齐父的 content 区；这时候该用 width: inherit 或 left: 0; right: 0;（配合 position: absolute），而不是硬套百分比。
