left 和 right 同时生效的前提是 position 值为 absolute 或 fixed（sticky 触发后也适用），且包含块有明确宽度；否则仅偏移不拉伸。
left 和 right 同时生效的前提是什么
必须满足 position 值为 absolute 或 fixed（sticky 在触发后也适用），且其包含块有明确的宽度。如果元素是 static 或 relative，left 和 right 仅做偏移，不会拉伸。
常见错误现象：left: 20px; right: 20px; 写了但没效果——八成是忘了加 position: absolute，或者父容器没设 position: relative（导致包含块变成视口，但内容又没撑开视口宽度）。
为什么 left + right 能拉伸 width
当元素处于绝对定位状态时，left 和 right 不再只是“移动”，而是定义了该元素**左边缘距包含块左边的距离**和**右边缘距包含块右边的距离**。浏览器会自动计算中间剩余空间作为元素的 width（前提是未显式设置 width）。
这本质上是 CSS 的「尺寸计算规则」：对于绝对定位元素，若 width 为 auto，且 left、right、margin-left、margin-right 都有确定值，则 width = 包含块宽度 − left − right − margin-left − margin-right。
所以：left: 200px; right: 0; 就等效于「从距离左边 200px 处开始，一直拉到右边边界」——宽度自然就是「父宽减 200px」。
用 left/right 实现右侧自适应区域的典型写法
适用于侧边栏固定、主内容区自适应的经典场景。关键点不是“怎么写”，而是“怎么避免错位”：
- 父容器必须设
position: relative（否则absolute子元素会相对于视口定位，容易错位） - 固定侧边栏（如左侧导航）设
position: absolute; left: 0; top: 0; width: 200px; - 主内容区设
position: absolute; left: 200px; top: 0; right: 0;—— 这里不写width，靠left和right拉伸 - 如果主内容区有滚动需求，记得加
overflow-y: auto，否则内容溢出不可见
示例：
.container { position: relative; height: 100vh; }
.sidebar { position: absolute; left: 0; top: 0; width: 200px; height: 100%; }
.main { position: absolute; left: 200px; top: 0; right: 0; height: 100%; overflow-y: auto; }
和 flex/grid 相比，这种写法容易被忽略的限制
它不响应子元素内容高度变化——因为 absolute 元素脱离文档流，父容器无法根据它自动撑高。如果你的 .main 内容高度不固定，且希望整个 .container 随之扩展，那就不能只靠 left/right 拉伸，得换方案。
另外，top 和 bottom 同理可拉伸高度，但要注意：若同时设 top、bottom 和 height，height 会被忽略；若只设 top 和 height，bottom 就无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
