子元素设 width: 100% 未撑满主因是 box-sizing 默认为 content-box 且父容器有 padding/border；应设 box-sizing: border-box，或改用 flex: 1、inset: 0 或调整表格布局。
子元素设 width: 100% 却没撑满？检查 box-sizing 和内边距
默认情况下，width: 100% 只占容器的 content-box 宽度，不包含 padding 和 border。如果父容器有 padding: 20px，子元素即使设了 width: 100%，实际也会窄 40px（左右各 20px）。
- 务必给子元素加
box-sizing: border-box，让它把 padding/border 算进宽度里 - 父容器的
padding和border会直接挤压子元素可用空间，不是“视觉上没撑满”的错觉，而是真实尺寸不足 - 若父容器用了
box-sizing: border-box，但子元素没设，两者计算基准不一致，结果更难预测
用 flex 替代百分比时，flex: 1 比 width: 100% 更可靠
百分比依赖父容器显式宽度，而 flex 布局在多数场景下能自动填满剩余空间，尤其适合响应式容器或嵌套较深的结构。
- 父容器需设
display: flex，子元素设flex: 1（等价于flex: 1 1 0%） -
flex: 1不受父容器 padding 影响，也不需要手动算减法；而width: calc(100% - 40px)一旦 padding 改变就得同步改 - 注意：如果子元素有
min-width（比如图片、输入框），可能阻止它收缩，导致溢出或换行
绝对定位子元素用 inset: 0 最简实现“充满”
当子元素是 position: absolute，且父容器是 relative 或 absolute 时，inset: 0 是最干净的写法，替代老式四方向设 0。
-
inset: 0等价于top: 0; right: 0; bottom: 0; left: 0，语义清晰、代码短 - 它不受父容器
padding影响——绝对定位元素是相对于父容器 content-box 的边界定位的，所以父容器 padding 会自然留空 - 如果希望子元素也覆盖父容器 padding 区域，得改用
top: -20px; left: -20px; width: calc(100% + 40px)这类硬编码，不推荐
表格单元格（<td>）里子元素无法 <code>width: 100%？那是表格布局特性
表格单元格默认是 table-cell，它的宽度由表格算法决定，内部子元素设 width: 100% 实际参照的是“该单元格当前被分配到的宽度”，而非父 <td> 元素本身尺寸。<ul>
<li>常见表现：子元素突然被压窄，或在不同列间宽度不一致</li>
<li>解法一：给 <code><td> 设 <code>width: 1px; white-space: nowrap，逼表格按内容定宽，再让子元素自由伸展
<td> 改成 <code>display: block，但它就不再是表格语义了，慎用于数据表格width: max-content 或 min-width: 0 配合 flex，更可控盒模型和布局上下文才是关键——不是百分比写错了，而是你没意识到它到底“百分”谁的宽度。改一个 box-sizing 或换一种布局模式，往往比调十次 calc() 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
