width: 100% + padding 溢出是因为默认 box-sizing: content-box，width 仅指内容区宽度，padding 和 border 额外叠加导致总宽超限；改用 box-sizing: border-box 可使 width 包含 padding 和 border，内容区自动收缩，从而避免溢出。
这不是写错了，是浏览器默认用 box-sizing: content-box —— 此时 width: 100% 只管内容区宽度，padding 和 border 会额外加在它外面，总宽必然超限。
为什么 width: 100% + padding 一定溢出？
因为 width 在默认盒模型下只定义内容区尺寸。比如父容器 content 宽 300px，子元素设 width: 100% + padding: 12px，实际占用宽度就是 300px + 24px = 324px。
- 表单控件（
input、textarea）自带浏览器默认padding和border，不重置就几乎必溢出 - 父容器自身有
padding: 0 20px时，它的 content 区只剩 260px；子元素width: 100%就只占这 260px，再叠上自身padding，又容易撑破 -
table和td默认无视box-sizing，必须显式声明才生效
box-sizing: border-box 是怎么“压住” padding 的？
它把 width 的含义从“内容宽”改成“边框盒总宽”。你写 width: 100% + padding: 12px，内容区自动收缩，整个元素仍严格按父容器 content 区等宽。
- 全局重置推荐写法：
* , *::before, *::after { box-sizing: border-box; }—— 漏掉::before或::after，伪元素可能仍按content-box渲染 - 老项目不敢动全局？优先加在高频出问题的地方：
input、textarea、.form-group > *、.card-content - 加了但还是溢出？打开 DevTools 的 Computed 面板，确认
box-sizing确实生效（不是被更高优先级规则覆盖）
为什么加了 border-box 还是没顶到边？
因为 width: 100% 永远是对齐父容器的 content 区，不是总宽。父容器若有 padding，子元素就算 box-sizing: border-box，也只会填满那个被内边距缩窄后的 content 区。
立即学习“前端免费学习笔记（深入）”；
- 想视觉上“顶满”父容器边缘：改用
left: 0; right: 0;配合position: absolute（注意此时width: 100%是按父的 padding box 计算） - 或内部嵌套一层容器，把
padding移到外层，子元素用width: 100%直接撑满 -
margin永远额外加在盒模型外面，box-sizing对它完全无效 —— 别指望靠它解决margin导致的溢出
真正容易被忽略的是：即使 box-sizing: border-box 生效了，只要父容器自己有 padding，子元素的 width: 100% 就不是“占满父容器总宽”，而是“占满父容器内容区”。这时候得先明确设计意图——是要对齐内容区，还是对齐边框。
