当left和right同设为0时元素不拉伸，是因为absolute/fixed元素width默认由内容决定，未设width且父容器无明确宽度时浏览器无法计算唯一宽度值，故忽略right约束。
left 和 right 同时设为 0 时，元素为什么没拉伸？
因为 position: absolute 或 position: fixed 的元素，若未显式设置 width，默认宽度由内容决定（width: auto），此时 left: 0; right: 0 并不会触发拉伸——浏览器不知道该以什么为基准计算宽度，会直接忽略 right 约束。
真正触发拉伸的条件是：元素必须是「具有明确尺寸计算上下文」的定位元素，且不能依赖内容撑开。
- 必须设置
position为absolute或fixed - 必须同时声明
left: 0和right: 0 - 必须将
width显式设为auto（或不设，但前提是满足下一条） - 父容器需有明确宽度（不能是
width: auto且无约束的块级上下文）
用 left/right 0 实现弹性拉伸的正确写法
核心是让浏览器能解出唯一宽度值：当 left、right、margin、border、padding 都确定后，width 就被隐式算出来了。
最简可靠写法：
立即学习“前端免费学习笔记（深入）”；
.stretch-box {
position: absolute;
left: 0;
right: 0;
top: 10px; /* 可选，不影响水平拉伸 */
bottom: auto; /* 避免 vertical 拉伸干扰 */
}- 不写
width—— 让浏览器自动计算为parentWidth - left - right - border - padding - 避免同时设
top和bottom，否则可能触发垂直拉伸，干扰预期行为 - 若父容器是
position: relative，且自身有margin，记得它会从拉伸宽度中扣除
flex 或 grid 能否替代？什么时候不该用 left/right 0
可以替代，但语义和行为不同：left: 0; right: 0 是纯粹的定位覆盖，不参与文档流；而 display: flex 或 grid 是布局模型，影响子元素排列。
- 要兼容老浏览器（如 IE10–）且需绝对定位 → 必须用
left/right - 元素需要响应式内边距、间隙或对齐控制 → 优先用
display: flex+flex-grow - 父容器本身是
position: static且无relative包裹 →left/right 0会相对于 viewport 定位，容易错位 - 设置了
transform（如translateX）→ 可能导致left/right计算异常，建议统一用 transform 控制位移
常见错误现象与调试线索
典型表现：元素卡在左上角、只显示一部分、宽度为 0、或拉伸后文字换行异常。
- 控制台没报错，但元素没拉伸 → 检查父容器是否漏了
position: relative - 元素拉伸了但内容溢出 → 很可能是
white-space: nowrap或min-width干扰，加min-width: 0重置 - 在 Safari 中失效 → 某些版本对
right: 0在inline元素上支持差，确保元素是block或inline-block - 用了
box-sizing: border-box却仍算不准 → 注意border和padding会被包含进拉伸宽度，不是“额外加”
最容易被忽略的是：这个拉伸行为完全依赖父容器的定位上下文。没有 position: relative（或 absolute/fixed）的父级，left/right 0 就会飞到视口边缘，而不是你想要的局部区域。
