绝对定位元素设 left 和 right 但宽度不变，是因为 width 默认 auto，浏览器按内容撑开；要填满 left 到 right 区域，需去掉 width，仅用 left/right（或 inset），并确保父容器有 position: relative。
绝对定位元素设了 left 和 right 但宽度没变？
这是因为 width 默认是 auto，而绝对定位下，left + right + margin + border + padding + width 才等于包含块宽度。只要没显式设 width，浏览器会按内容撑开——不是你想要的“自适应剩余空间”。
想让元素填满 left 到 right 之间的区域，必须让 width 参与计算。最直接的方式就是不设 width，改用 left 和 right 配合 position: absolute 的自动宽度行为。
- 确保父容器有
position: relative（或absolute/fixed），否则left/right会相对于视口定位 - 去掉
width声明，只保留left和right（例如left: 20px; right: 30px;） - 如果同时设了
width，它会覆盖left/right的宽度推算逻辑，导致自适应失效
inset 是更干净的写法，但得看浏览器支持
inset 是 top/right/bottom/left 的简写，和 margin 类似，但它在绝对定位中能触发自动宽度计算，语义也更清晰。
比如 inset: 10px 20px 15px 25px 等价于 top: 10px; right: 20px; bottom: 15px; left: 25px，此时元素宽度 = 包含块宽度 − left − right − 左右 border − 左右 padding。
- Chrome 89+、Firefox 63+、Safari 14.1+ 支持；IE 完全不支持
- 用
inset时仍要避免同时声明width，否则自动宽度逻辑被绕过 - 如果项目需兼容旧版 Safari 或 Edge 18−，退回
left/right组合更稳妥
为什么加了 box-sizing: border-box 还不对齐？
box-sizing 控制的是 width 是否包含 padding 和 border，但它不改变 left/right 的参考基准——这两个值始终从**边框外边缘**开始计算。
也就是说，即使用了 border-box，left: 10px; right: 10px 仍会让内容区宽度 = 父容器宽 − 20px − 左右 border − 左右 padding。如果你期望“内容区刚好占满中间”，就得手动减掉这些值，或者用 calc() 补偿。
- 常见错误：设了
padding: 12px和border: 2px solid #ccc，却只写left: 10px; right: 10px，结果内容区比预期窄了 28px（左右各 14px） - 补救方式：用
right: calc(10px + 14px)或干脆把padding/border移到子元素上 - 更稳的做法：把
padding和border放在绝对定位的父容器里，内部再套一层无边框/内边距的元素做内容容器
Flex 或 Grid 能替代吗？什么时候不该用绝对定位？
能替代，而且多数时候更推荐。绝对定位适合脱离文档流的装饰、浮层、固定控件；但如果目标只是“在某个区域内左右留白并自适应宽度”，用 display: flex 或 display: grid 更健壮、可维护性更高。
比如父容器设 display: flex，子元素设 margin: 0 20px，天然就留出左右间距且自动占满剩余空间，还天然响应内容变化、支持对齐、无障碍友好。
- 绝对定位在滚动时可能错位（尤其父容器有
transform或will-change） - Flex/Grid 下的元素仍参与文档流，打印、缩放、屏幕阅读器表现更可靠
- 只有当你明确需要脱离流（如悬浮按钮、下拉菜单、动画位移）时，才值得承担绝对定位的维护成本
position 上下文和 border/padding 对 left/right 计算的影响。这两处一错，宽度就完全不可控。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
