width: 100% + padding 溢出不是 bug，是 content-box 默认规则所致：width 仅指内容区，padding 和 border 额外叠加；修复需用 box-sizing: border-box（须覆盖 、::before、*::after），并验证 computed 面板生效，同时注意 margin、伪元素、绝对定位及 min-width: 0 等协同影响。
width: 100% + padding 溢出不是 bug，是 content-box 的默认算法规则
浏览器默认用 box-sizing: content-box，此时 width: 100% 只控制内容区宽度，padding 和 border 是额外加在它外面的。比如父容器总宽 300px、子元素设 padding: 12px，实际占用宽度就是 300px + 24px = 324px —— 必然溢出。
更隐蔽的情况：父容器自己有 padding: 0 20px，它的 content 区只剩 260px；子元素 width: 100% 就只占这 260px，再叠上自身 padding，又超了。
-
input、textarea等表单元素自带浏览器默认padding和border，不显式重置的话，width: 100%几乎必溢出 - 表格单元格（
td、th）默认无视box-sizing，必须显式声明才生效 - 绝对定位元素（
position: absolute）的width: 100%是按父元素的 padding box 计算的（含父padding），不是 content box，尺寸判断容易误判
box-sizing: border-box 生效了吗？别信代码，看 Computed 面板
写了 box-sizing: border-box 不等于它真起作用。常见失效原因包括：
- 其他样式规则优先级更高，覆盖了你的设置
- CSS-in-JS 库（如
styled-components）SSR 注入顺序错乱，首屏闪动 - 框架（如 Bootstrap）自己重写了
box-sizing，但没包含::before/::after，导致伪元素仍按content-box算
唯一可信依据：打开浏览器开发者工具 → 切到「Computed」面板 → 直接查目标元素的 box-sizing 值。
全局重置要写全，否则伪元素照样溢出
只写 * { box-sizing: border-box; } 是不够的。伪元素（::before、::after）可能漏掉，继续用 content-box，导致插入的内容意外撑开。
推荐写法必须包含三部分：
*,
*::before,
*::after {
box-sizing: border-box;
}
老项目不敢动全局？优先加在高频出问题的地方：
-
input、textarea、select -
.form-control、.card-content、.form-group > *
就算用了 border-box，这些地方照样会溢出
box-sizing: border-box 只管 width/height、padding、border 的归属关系，对 margin 完全无效——它永远算在总尺寸之外。
-
margin: 20px导致的溢出：加了border-box没用，得把padding移到父元素上，或改用gap，或用calc(100% - 40px)手动扣减（但响应式下难维护） - flex 或 grid 子项若设了
min-width: auto（img、input默认值），即使box-sizing正确，也得配min-width: 0才能防撑开 - 父容器有
padding时，子元素width: 100%仍是按父 content 区算的，不是总宽——这时候得看设计意图：是要对齐内容区，还是对齐边框
真正难处理的从来不是 box-sizing 本身，而是它和 min-width、margin、display 类型（比如 inline 图片）、甚至父容器是否创建 BFC 的组合效应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
