本文介绍如何在存在中间包装层（如用于绝对定位的 wrapper）的情况下，使 元素的宽度仍能相对于祖父级容器（而非父级 wrapper）按百分比设置，借助 CSS 容器查询单位 cqw 实现精准控制。
本文介绍如何在存在中间包装层（如用于绝对定位的 wrapper）的情况下，使 `` 元素的宽度仍能相对于祖父级容器（而非父级 wrapper）按百分比设置，借助 css 容器查询单位 `cqw` 实现精准控制。
在传统 CSS 布局中，百分比宽度（如 width: 80%）始终相对于直接父元素计算。当引入一个无显式宽高的中间 wrapper（例如
）用于绝对定位装饰元素时，该 wrapper 默认收缩包裹内容，失去宽度上下文，导致子 的 80% 实际基于其“看不见”的窄父级计算，而非预期的祖父容器（如 #container），从而失效。
现代解决方案是利用 CSS 容器查询（Container Queries） 提供的容器查询长度单位：cqw（container query width）、cqh、cqi、cqb 等。其中 cqw 表示当前容器（即最近的、已声明 container-type 的祖先）的宽度，单位为 1/100，因此 80cqw 等价于该容器宽度的 80%。
实现步骤如下：
- 为祖父容器启用容器查询上下文：添加 container-type: inline-size（或 size）；
- 移除对 wrapper 宽度的依赖：wrapper 保持 display: inline-block; position: relative 即可，无需设宽高；
- 在 input 上直接使用 cqw 单位：替代 80%，改用 80cqw。
✅ 正确代码示例：
<div id="container" style="width: 1000px; container-type: inline-size;">
<div id="wrapper" style="display: inline-block; position: relative;">
<input type="text" name="x" style="width: 80cqw; box-sizing: border-box;">
</div>
</div>
⚠️ 注意事项：
- container-type: inline-size 仅需在作为参考尺寸的祖先容器上声明（此处为 #container），无需在 wrapper 上重复；
- cqw 是相对单位，会随容器尺寸动态响应（如容器被 resize 或媒体查询触发），天然支持响应式；
- 为确保边框/内边距不破坏宽度精度，建议为 添加 box-sizing: border-box；
- 浏览器兼容性良好：Chrome 111+、Firefox 117+、Safari 16.4+ 均已原生支持（caniuse 数据）；旧版浏览器需降级为 JavaScript 计算或固定像素 fallback。
总结：cqw 单位从根本上解耦了宽度参照层级，使子元素可直接锚定任意祖先容器尺寸，完美解决“中间 wrapper 破坏百分比上下文”的经典布局难题——无需 JS、不污染结构、语义清晰且响应就绪。
