绝对定位元素width: 100%不生效，因父容器未设position: relative导致包含块为视口；须先设父元素position: relative并确保其有可计算宽度，再配合left: 0; right: 0; width: auto;或box-sizing: border-box使用。
父容器没设 position: relative，width: 100% 就是白写
绝对定位元素的 width: 100% 不是继承父元素视觉宽度，而是计算其「包含块」的宽度。如果父元素是 position: static（默认值），浏览器会一路向上找，直到找到最近的 position: relative、absolute 或 fixed 祖先；找不到，就退到视口——这时 width: 100% 就变成全屏宽。
所以第一件事不是调子元素，而是检查父容器是否加了 position: relative。漏掉这行，其他都无效。
- 不要用
position: absolute给父容器：它会脱离文档流，可能让布局塌陷 - 父容器若本身是
display: flex或grid，仍需额外加position: relative才能成为包含块 - 嵌套多层时，用开发者工具看 computed 的
width和 reference box，确认到底参照的是哪一层
left: 0; right: 0; 比 width: 100% 更可靠
当父容器已设 position: relative，left: 0; right: 0; 是更鲁棒的写法：它强制子元素拉伸填充左右边界，且不受父容器 padding 影响（只要配合 box-sizing: border-box）。
而 width: 100% 在父容器宽度不可计算时（比如仅靠内容撑开、或浮动未清除），可能算出 0px 或 NaN。
- 若父容器有
padding，left: 0; right: 0;默认对齐 content box 边缘；要对齐 padding 内边缘，得额外加inset: 0（但 IE 不支持） -
left: 0; right: 0; width: auto;是现代推荐组合，比单纯width: 100%更少意外 - 避免同时写
left: 0; width: 100%; right: 0;—— 浏览器会按规范忽略right，但语义冲突易引发维护困惑
父容器宽度必须“可计算”，否则 100% 无意义
width: 100% 要生效，父容器得有明确宽度来源：显式 width、max-width、被 flex/grid 轨道约束，或受外层容器限制。纯 width: auto 且无约束（如 float 环境中未清除浮动），会导致子元素的 100% 计算失败。
常见失效场景：
- 父容器是
display: inline-block且没设width→ 宽度由内容决定，100%可能为 0 - 父容器在
float中，兄弟元素未清除浮动 → 父容器高度/宽度塌陷 - 父容器是 flex item 但没设
flex-basis或min-width→ 实际宽度不确定
响应式下优先用 inset: 0，但得看兼容性
inset: 0 是 top: 0; right: 0; bottom: 0; left: 0 的简写，语义清晰，且天然支持逻辑属性（如 inset-inline-start: 0）。但它在 Safari 14.1 之前、所有 IE 版本中不支持。
如果你的项目需兼容旧浏览器，别直接上 inset；用四值定位 + position: relative 父容器是最稳妥路径。
-
inset不解决包含块问题：父容器仍需position: relative - 搭配
box-sizing: border-box可避免border和padding导致的溢出 - 若父容器设了
overflow: hidden，即使填满也会裁切内容——这不是宽度问题，是溢出策略问题
position），又要提供可计算宽度（靠布局上下文），缺一不可。很多人只改一边，结果怎么调都不生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
