width: 100% 仅基于父容器 content box 计算，不包含其 padding/border，导致总宽溢出；box-sizing: border-box 仅约束子元素自身盒模型，无法消除父容器内边距影响。
因为 width: 100% 只管内容区（content area）宽度，不包含 padding、border 和 margin —— 这些额外尺寸会直接叠加上去，导致总宽度必然溢出。
width: 100% 的计算基准是父容器的 content box
它不是“填满父容器整体”，而是填满父容器去掉 padding 和 border 后剩下的那块内容区域。如果父容器有 padding: 20px，它的 content width 就比总宽少 40px；子元素 width: 100% 拿到的就是这个缩水后的值，再加自己 padding: 8px 和 border: 1px，实际占宽 = (父 content width) + 16px + 2px。
- 开发者工具里看「Computed」面板，
width值确实等于父 content 宽，但offsetWidth或getBoundingClientRect().width会显示更大 - 父容器若用
box-sizing: border-box，不影响子元素的计算基准 —— 子元素仍按父的 content 区算 - 浮动（
float）或绝对定位（position: absolute）会改变参考系：前者仍按父 content 区，后者按父 padding box（含 padding）
box-sizing: border-box 是最常用但不够的修正手段
它只解决子元素自身盒模型的膨胀问题，把子元素的 padding 和 border “吸进” width 里，但对父容器的 padding/border 无能为力。
- 全局写
* { box-sizing: border-box; }能覆盖大多数子元素，但需注意伪元素也要加*::before, *::after - 表单元素（
<input>、<textarea></textarea>）自带 padding，即使设了box-sizing: border-box，也得额外加min-width: 0才能在 flex 容器中正常收缩 - 图片、iframe 等替换元素默认无视
width: 100%，必须配max-width: 100%和height: auto
flex/grid 容器里 width: 100% 经常“假装生效”
在 display: flex 或 display: grid 的父容器中，width: 100% 不参与主轴分配逻辑，它只在子项未被 flex 规则接管时起作用 —— 而这种场景往往已经隐含布局风险。
- 子项设了
flex: 1或flex-grow: 1，width: 100%直接被忽略 - 子项没设 flex 属性，但父容器宽度由内容撑开（比如没设
width），width: 100%会退化为内容宽度，看起来“没填满” - 哪怕父容器写了
width: 100%，若它自己处于一个未约束宽度的上下文中（如 float 父级或 inline-block 容器），计算结果仍是不可靠的
真正容易被忽略的是：百分比宽度永远依赖一个明确的、已计算出的参考宽度。一旦父容器宽度来自 auto、fit-content 或未闭合的浮动，width: 100% 就失去锚点 —— 浏览器可能 fallback 到视口宽度，也可能取 0，行为因引擎而异。调试时别只盯子元素样式，先确认父容器的 computed width 值是不是你预期的那个数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
