absolute元素未设width时，left和right共同决定其宽度：浏览器按“包含块宽度−left−right−左右padding−左右border”自动计算；但前提是包含块必须有明确宽度且已正确定义（如父级设position:relative），否则宽度可能塌陷为0或撑满视口。
absolute 元素没设 width 时，left + right 怎么影响宽度
不设 width 的 position: absolute 元素，如果同时写了 left 和 right，浏览器会按「包含块宽度 − left − right − 左右 padding − 左右 border」算出自动宽度。但这只在包含块有明确宽度时才可靠。
常见错误现象：div 设了 position: absolute; left: 20px; right: 20px;，但父容器没设宽也没设 position: relative，结果宽度变成 0 或撑满整个视口。
- 根本原因是：包含块退化为初始包含块（viewport），而 viewport 宽度是动态的，且不含 padding/border，计算结果容易失真
- 想让它“填满 left 到 right 区间”，必须确保父级有
position: relative（或其他非 static 值） - 如果父级高度也依赖子元素，注意：absolute 子项不参与父级高度计算，会导致父容器塌陷
width: 100% 为什么没撑满父容器
width: 100% 在 position: absolute 下，参考的是最近的「已定位祖先」（position 为 relative、absolute、fixed 或 sticky），不是 DOM 上的直接父元素。
典型症状：父容器没设 position: relative，子元素写 width: 100% 却占满整个屏幕。
- 检查开发者工具的「Computed」面板，看
Containing Block是谁；90% 的问题出在这里 - 加
position: relative到直接父级是最小改动解法，无需改其他样式 - 若中间某层用了
position: absolute或fixed，会打断包含块链，需逐层排查
想包裹内容，该用 fit-content 还是 max-content
当需要让 absolute 元素宽度刚好包住文字或内联内容（比如 tooltip、下拉菜单），不能只靠 left/right，得显式控制 width 行为。
width: fit-content 和 width: max-content 都能实现包裹，但语义不同：
-
fit-content：优先收缩，但不超过可用空间（类似min(max-content, available-width)） -
max-content：强制按最长行内容撑开，无视容器限制 - Safari 旧版需加
-webkit-fit-content；IE 完全不支持，回退方案是display: inline-block+position: absolute
left/right/width 同时存在时谁生效
三者共存时，width 是最终决定宽度的属性，left 和 right 只管定位，不再参与宽度推导。
例如：left: 10px; right: 10px; width: 200px; → 实际宽度就是 200px，右边不会停在 right: 10px 处，而是从 left: 10px 开始画 200px 宽，可能溢出。
- 动画中频繁改
left/right但保留width: auto，会触发重排（reflow），性能较差 - 固定
width更可控，尤其在滚动或 resize 场景下 - 用
inset替代top/right/bottom/left更简洁，但兼容性略低（inset: 10px 20px等价于top: 10px; right: 20px; bottom: 10px; left: 20px）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
