绝对定位元素width: 100%撑破父级，因其参照包含块而非视觉父元素；需父容器设position: relative且具备可计算宽度，并配合box-sizing: border-box防溢出。
绝对定位元素设 width: 100% 撑破父级，根本不是“宽度写错了”，而是它压根没按你想的父容器算尺寸——它参照的是包含块（containing block），而这个包含块很可能不是你视觉上的父元素。
父容器没设 position: relative，width: 100% 就参考视口
绝对定位元素的 width: 100% 永远不看 HTML 结构里的“父元素”，只找**最近的已定位祖先**（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）。如果找不到，就退到初始包含块——通常是视口（viewport）。
常见现象：.parent 是个普通 div，没加 position: relative；子元素 .child { position: absolute; width: 100%; }，结果宽度撑满整个屏幕，而不是父容器。
- 必须给父容器显式加
position: relative（哪怕只是空声明） - 检查祖先链中是否有更近的已定位元素“劫持”了参考系（比如某个中间
section也设了position: absolute） - 用开发者工具「Computed」面板看
width的 actual value 和 reference box，确认它到底在跟谁算
width: 100% 在绝对定位下实际算的是父的 padding box
即使父容器加了 position: relative，width: 100% 的计算基准也不是它的 content 区，而是 **padding box**（即总宽减去 margin，但包含 padding）。这意味着：如果父容器有 padding: 20px，子元素 width: 100% 就会等于父总宽，而不是 content 宽。
问题来了：子元素自己若再加 padding 或 border，又回到 box-sizing: content-box 的老问题——总宽 = 父 padding box + 自身 padding + 自身 border。
- 绝对定位元素也要配
box-sizing: border-box，否则自身内边距和边框仍会外溢 - 别依赖
* { box-sizing: border-box; }就万事大吉——伪元素::before/::after默认仍是content-box，得单独补上 - 若父容器有 padding，且你希望子元素视觉上“顶到父边缘”，
left: 0; right: 0;比width: 100%更可靠（但注意它不感知父 padding）
width: auto 在绝对定位下根本不填满，别误用
很多人以为 width: auto 是“自适应宽度”，但在绝对定位上下文中，它默认是 **shrink-to-fit**（内容最小宽度），不是“填满可用空间”。除非你同时设置了 left 和 right（如 left: 0; right: 0;），浏览器才会强制拉伸宽度以满足约束。
- 只写
left: 0;+width: auto;→ 宽度 = 文字所需最小宽度（可能只有 50px） - 写
left: 0; right: 0;+width: auto;→ 宽度 = 可用空间（此时才真正等效于“填满”） - IE8 及更早版本不支持
left + right触发拉伸，需降级用width: 100%并确保包含块明确
父容器宽度不可计算时，100% 直接失效
绝对定位元素的百分比宽度，要求包含块必须有**可计算的宽度值**。如果父容器宽度是 auto 且没被其他约束（比如 flex item 没设 flex-basis，或 inline-block 没内容撑开），那 width: 100% 实际计算出来就是 0px 或 NaN。
- 检查父容器 computed width 是否为具体数值（如
300px），而不是auto - 避免父容器处于浮动未清除、flex/grid 未设宽、或 display: inline-block 无内容等导致宽度塌陷的状态
- 嵌套多层 absolute 时，逐层确认哪一层成了包含块——浏览器不会跳过中间的
position: static父级
最常被忽略的点：包含块的确定规则和 width 百分比的计算逻辑是两套独立机制，缺一不可。漏掉 position: relative，或者父宽不可算，width: 100% 就只是 CSS 里一行无效的文本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
