根本原因是默认box-sizing: content-box，width: 100%仅指内容区宽度，padding和border额外叠加导致总宽超限；需用box-sizing: border-box修正，并验证computed值、覆盖伪元素、处理min-width: 0及margin等协同影响。
不是 width 写错了，是浏览器按 box-sizing: content-box 算尺寸时，把 padding 和 border 当成“额外加在 width 外面”的东西——结果总宽 = 父 content 宽 + 自身 padding + 自身 border，必然超限。
为什么 width: 100% 不等于“填满父容器总宽度”
默认盒模型下，width 只管内容区，不包含任何内边距或边框。哪怕父容器宽 300px、子元素写了 width: 100%，只要它自己有 padding: 12px 和 border: 1px，实际占宽就是 300px + 24px + 2px = 326px。
更隐蔽的是：父容器若有 padding: 0 20px，它的 content 区只剩 260px；子元素 width: 100% 就只占这 260px，再叠上自身 padding，又撑出去了。
-
margin永远不算进 width，加了box-sizing: border-box也拦不住它往外撑 - 绝对定位元素的
width: 100%是按父的 padding box 计算（含父 padding），不是 content box -
table和td默认无视box-sizing，必须显式声明才生效
怎么确认 box-sizing: border-box 真生效了
写了不等于起作用。唯一可信依据是开发者工具「Computed」面板里查目标元素的 box-sizing 值。
- 常见失效原因：其他样式规则优先级更高，覆盖了你的设置
- CSS-in-JS 库（如 styled-components）SSR 注入顺序错乱，首屏闪动
- 框架（如 Bootstrap）重写了
box-sizing，但没包含::before/::after，导致伪元素仍按content-box算
input、textarea 等表单元素为什么必溢出
它们自带浏览器默认 padding 和 border，且多数未显式声明 box-sizing。哪怕你只写 width: 100%，实际已超。
- 必须显式加
box-sizing: border-box，不能依赖继承 - 全局重置最省事：
* { box-sizing: border-box; }，但要补全伪元素：*::before, *::after { box-sizing: border-box; } - 老项目不敢动全局？优先加在高频出问题的地方：
input、textarea、select、.form-control
flex 或 grid 容器里还用管 box-sizing 吗
要管。flex item 默认会收缩，但一旦设了 min-width: auto（这是 img、input 的默认值）或显式 width: 100%，且父容器没设 overflow: hidden，padding 仍会导致横向滚动条或视觉错位。
- flex 子项必须配
min-width: 0，否则box-sizing也救不了它被撑开 - grid 子项同理，尤其用了
grid-template-columns: 1fr时，min-width: 0是刚需 - 即使用了 flex/grid，父容器若设了
padding，子元素width: 100%仍只对 content 区生效——所以还是得靠box-sizing: border-box统一语义
真正难处理的从来不是 box-sizing 本身，而是它和 min-width、margin、display 类型（比如 inline 图片）、甚至父容器是否创建 BFC 的组合效应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
