绝对定位元素的 width:auto 按包含块可用宽度计算，非父元素视觉宽度；left/right 与 width 共存时 width 优先生效；box-sizing: border-box 配合 left/right 可贴合父容器内边沿；height: 100% 失效时应改用 top:0; bottom:0。
绝对定位元素的 width:auto 怎么算？
它不看父元素视觉宽度，只看「包含块」的可用宽度。如果父元素没设 position: relative，浏览器会一路往上找，找不到就退到视口（viewport）——这时 width: auto 就按视口宽度算，不是你看到的那个父盒子。
常见错误现象：
-
left: 20px; right: 20px;却撑满整个屏幕，或缩成一条线 - 开发者工具里 computed
width显示0px或一个远超预期的值
真正可控的做法是显式声明：width: fit-content（包裹内容），或 width: max-content（按最长行算）。注意 Safari 老版本要加 -webkit-fit-content，IE 完全不支持。
left/right 和 width 同时存在时谁生效？
三者共存时，width 是最终宽度值，left 和 right 只决定水平位置，不再参与宽度推导。
例如：
.box { position: absolute; left: 10px; right: 10px; width: 200px; }
→ 实际宽度就是 200px，右边不会停在 right: 10px 处，而是直接右边缘溢出。
要点：
- 想靠左右偏移控制宽度，就别写
width，让浏览器自动算 - 想固定宽度又微调位置，用
left+width，把right删掉 - 动画中频繁改
left/right且留width: auto，可能触发重排，固定width更稳
为什么 box-sizing 对绝对定位这么关键？
绝对定位元素常配合 left: 0; right: 0; 拉满，但若父元素有 padding，子元素默认顶到 content box 边缘，不是 padding 内侧——这不是 bug，是正常行为。
这时候 box-sizing: border-box 就起作用了：
- 它让
width: 100%包含 padding 和 border，避免内容被挤出 - 配合
left: 0; right: 0;时，border-box能让子元素真正贴合父容器内边沿（只要父元素也设了box-sizing） - 别依赖
width: 100%+box-sizing组合来“避开 padding”，那只是巧合；真要避，得用calc()手动减，比如right: calc(0px + 20px)
高度方向的包含块约束更严格
height: 100% 在绝对定位下几乎总是失效，因为它的计算依赖包含块有**明确高度值**（不能是 height: auto）。而大多数父元素默认就是 auto。
真正可靠的方式是：top: 0; bottom: 0; —— 它强制子元素在垂直方向填满包含块的可用空间，但前提是父元素已建立包含块（即加了 position: relative）且本身有高度上下文（比如显式 height、min-height，或被 flex/grid 约束）。
容易被忽略的一点：包含块的确定和尺寸计算是两套独立逻辑。漏掉 position: relative，或父元素高度不可计算，任一条件不满足，top/bottom 就会回退到视口，而不是你看到的父容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
