只设 left 宽度为 0px 是因为 left 是位置偏移而非尺寸指令，浏览器无法确定右边界，触发 shrink-to-fit 规则导致元素收缩；必须同时设置 left 和 right 才能自动计算宽度。

为什么只设 left 宽度就变成 0px

因为 left 是位置偏移，不是尺寸指令。浏览器只知道“从左边挪 20px”，但完全不知道右边停在哪——没右边界，就只能退回到“收缩包裹内容”（shrink-to-fit）规则：空元素变 0px，单行文字只占几个像素，视觉上直接消失。

常见触发场景：

• top: 50%; left: 50%; transform: translate(-50%, -50%) 居中一个空 <div> <li>父容器没设 <code>width，子元素又只写了 left: 1rem，没配 right
• 动态插入内容前 JS 就读取了 offsetWidth，返回 0

left 和 right 同时设才真正拉伸宽度

这是唯一不写死像素、又能自动填满的原生方式。当 left 和 right 都存在（且没设 width），浏览器会用“包含块内容区宽 − left − right”算出中间宽度。

实操要点：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• left: 0; right: 0 等效于“铺满父容器内容区”，比 width: 100% 更稳——它不依赖父级是否已有宽度，也不受父级 padding 影响
• left: 10px; right: 10px 自动留白，等效 width: calc(100% - 20px)，但无需计算且兼容性更好
• ⚠️ 如果同时写了 width，left/right 可能被忽略或冲突，优先级更高的是 width
• 必须确保父容器是已定位元素（如 position: relative），否则包含块是 body，宽度变成整个视口

width: 100% 为什么经常失效

它不是“占满父容器”，而是“占满最近已定位祖先的内容区宽度”。如果那个祖先本身宽度为 0（比如没设宽的 <div>，或只含 absolute 子项的父容器），那 <code>100% 就等于 0。

典型失效链：

• 父容器是 position: absolute 但没设 left/right 或 width → 自身宽度为 0
• 父容器是 flex item，但主轴没约束尺寸（如 flex: 1 却在无宽度上下文中）→ 无法推导宽度
• 父容器为空，或只含 absolute 子元素 → 渲染后宽度塌陷 → width: 100% 失效

调试时直接看 DevTools 的 Computed 标签页，确认该元素的 width 是否真为 0px，再往上查它的包含块是不是你预期的那个父元素。

真正容易被忽略的点：包含块到底是谁

position: absolute 的一切尺寸都锚定在「最近的非 static 祖先」上。这个祖先一旦错位，所有宽度逻辑都会偏移——比如你写了 left: 0; right: 0，但父容器漏了 position: relative，那它就相对于视口定位，宽度变成整个屏幕宽，而不是你想要的父容器宽。

别指望浏览器自动猜你想要多大。塌陷不是缺陷，是 absolute 的契约：你得给明确锚点、明确边界、明确参照。否则它就按规范收缩到最小，连一丝犹豫都不会有。