left 和 right 同时为 0 时不拉伸，主因是父容器未设 position: relative/absolute/fixed，导致定位上下文缺失；真正触发拉伸需满足：父容器有明确包含块宽度、元素自身无显式 width 声明。
left 和 right 同时为 0 时元素不拉伸？先确认定位上下文
绝对定位元素 left: 0; right: 0; 没拉伸，大概率是因为父容器没设 position: relative（或 absolute/fixed）。此时 left 和 right 会相对于 viewport 计算，而 viewport 宽度虽明确，但若元素自身有 width 声明（哪怕 width: auto），浏览器仍可能按内容宽度优先渲染，忽略拉伸逻辑。
真正触发拉伸的关键不是“写了 left 和 right”，而是：浏览器能唯一解出 width = 包含块宽度 − left − right − 左右 border − 左右 padding。这要求：
- 父容器必须提供明确的包含块宽度（比如
width: 300px或max-width: 100%+position: relative） - 元素自身不能显式声明
width（包括width: 100%、width: fit-content等） -
box-sizing不影响该计算，但会影响最终内容区大小——left和right始终从边框外边缘起算
inset 能替代 left/right 吗？看兼容性和语义需求
inset 是 top/right/bottom/left 的简写，Chrome 89+、Firefox 63+、Safari 14.1+ 支持，IE 完全不支持。它和 left: 0; right: 0; 在拉伸行为上完全等价，但更清晰表达“四向内缩”意图。
用 inset 时仍要遵守相同规则：
- 不要同时写
inset: 0; width: 200px——width会覆盖自动计算 -
inset: 10px 20px等价于top: 10px; right: 20px; bottom: 10px; left: 20px，此时水平宽度 = 包含块宽 − 40px − 左右 border − 左右 padding - 若需兼容 Safari 13 或 Edge 18−，退回
left/right更稳妥
为什么加了 transform 后 left/right 拉伸失效？
当元素同时有 transform: translateX(10px) 和 left: 0; right: 0; 时，视觉位置是叠加的，但拉伸逻辑仍存在——只是你可能误判了“拉伸后的位置”。更严重的问题是：某些旧版 Safari 在 transform + right 组合下，对包含块宽度估算异常，导致计算出的 width 多出几像素，进而触发横向滚动条。
调试建议：
- 临时移除所有
transform，确认拉伸是否恢复 - 若必须位移，优先用
translateX替代right，避免参与盒模型计算 - 在 DevTools 中检查 computed
width值是否符合预期（例如父宽 400px，left: 10px; right: 10px;→width: 380px）
横向滚动条莫名出现？重点查 right 的负值和动态 JS 注入
最常被忽略的坑：right: -10px 看似只是往右挪一点，实际会让浏览器算出 width = 包含块宽 − left − (−10px)，也就是比父容器宽 10px。这个“多出来的宽度”不会让元素变宽，但会扩大布局占用空间，使 body.scrollWidth > window.innerWidth，从而强制出现横向滚动条。
尤其注意这些场景：
- UI 库组件（如弹窗、提示框）内部 JS 动态写
style.right，你改 CSS 可能被覆盖 - Safari 下因 DPR 或滚动条宽度估算偏差，
right: 0也可能被算成right: 0.3px，累积后触发放大误差 - 用
$$('body')[0].scrollWidth - window.innerWidth在控制台快速验证是否由定位元素引起
修复时不靠 overflow-x: hidden 掩盖，而是把可疑的 right: -Xpx 改成 transform: translateX(Xpx)，或统一用单边定位 + width 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
