width: 100%撑不满父容器的根本原因是默认box-sizing: content-box，width仅指内容区宽度，padding和border额外叠加；height: 100%失效则因父元素computed height为auto导致计算基准为0px，须用box-sizing: border-box和显式父高度（如height: 100vh）或flex: 1解决。
子元素无法“充满”父容器，绝大多数情况不是写错了样式，而是没搞清盒模型的计算逻辑和布局依赖关系。直接设 width: 100% 或 height: 100% 失效，几乎都卡在这几个环节上。
为什么 width: 100% 撑不满父容器？
根本原因是 width: 100% 默认只占父元素的 content-box 宽度，不包含 padding 和 border。如果父容器有 padding: 20px，子元素实际宽度会比视觉预期窄 40px。
- 必须给子元素加
box-sizing: border-box，否则 padding/border 会额外撑出尺寸 - 父容器若用了
box-sizing: border-box而子元素没设，两者基准不一致，结果更难预测 - 表格单元格（
<td>）里设 <code>width: 100%无效——那是表格算法决定的，不是 CSS 继承问题 - 避免用
calc(100% - 40px)硬减，一旦父容器 padding 改变就得同步改，维护成本高 - 检查父元素的
Computed Height是否非零——这是最快定位起点 -
height: 100vh更可靠，但注意 iOS Safari 对vh的滚动条兼容问题；min-height: 100vh更安全 - 父容器是
display: flex但没设高度，或position: absolute未定义top/bottom，都会导致子元素高度继承失败 - 块级子元素的上下
margin会外边距合并，脱离父容器，进一步干扰高度计算 - 父容器需设
display: flex（水平填充）或display: flex; flex-direction: column（垂直填充） -
flex: 1等价于flex: 1 1 0%，其中flex-basis: 0%避免内容固有尺寸干扰分配 - 若子元素本身有
min-width（如图片、<input>），可能阻止收缩，需配合min-width: 0或overflow: hidden - 绝对定位场景下，
inset: 0比写四次top/right/bottom/left: 0更简洁，且不受盒模型影响
为什么 height: 100% 不生效？
height: 100% 是相对于父元素的“计算后高度”，不是“填满可用空间”。如果父元素高度由内容撑开、或没设 height/min-height，那 100% 就等于 0px。
用 flex: 1 替代百分比更稳
Flex 布局绕过了“父高必须显式声明”的限制，只要父容器有确定高度（哪怕只是 height: 400px 或 min-height: 100vh），子元素设 flex: 1 就能自动占满剩余空间。
真正容易被忽略的是：盒模型归一化（全局 box-sizing: border-box）和父容器高度来源是否明确。这两点不确认，调再多次 width/height 都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
