CSS容器查询单位：使用 cqw 实现表单输入框相对于祖父容器的百分比宽度

本文介绍如何在嵌套结构中（如 input 被包裹在相对定位 wrapper 内）让表单控件宽度准确基于祖父级容器（而非父级）计算，通过现代 CSS 容器查询单位 cqw 实现无需硬编码尺寸的响应式布局。

本文介绍如何在嵌套结构中（如 input 被包裹在相对定位 wrapper 内）让表单控件宽度准确基于祖父级容器（而非父级）计算，通过现代 css 容器查询单位 `cqw` 实现无需硬编码尺寸的响应式布局。

当为表单元素添加绝对定位装饰层（如图标、下拉箭头或验证提示）时，常需引入一层 position: relative 的包装容器（wrapper）。但该 wrapper 若采用 display: inline-block 或 fit-content 行为，便不再继承父容器宽度，导致其子元素（如 <input>）设置 width: 80% 时，实际按 wrapper 的动态内容宽度计算——而非我们期望的祖父容器（如 #container）的 1000px。

传统方案（如给 wrapper 显式设 width: 100% 或 min-width: 1000px）破坏封装性，且难以响应式适配。现代解法是启用 CSS 容器查询（Container Queries）：只需在祖父容器上声明 container-type: inline-size，即可将其定义为一个“尺寸容器”（size container），使其后代能使用容器查询长度单位（cqw / cqh / cqi 等）。

cqw（container query width）表示当前容器的内联方向宽度（即水平宽度）的 1%，因此 width: 80cqw 等价于“占祖父容器宽度的 80%”，完全绕过 wrapper 的尺寸干扰。

✅ 正确实现代码如下：

立即学习“前端免费学习笔记（深入）”；

<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），且该容器需具有明确的块级尺寸上下文（如设置了 width 或 max-width）；
• cqw 单位仅在启用了容器查询的祖先链中生效，不依赖于 @container 规则，属于“隐式容器查询”；
• 推荐为 <input> 添加 box-sizing: border-box，确保 padding 和 border 不影响 80cqw 的最终可视宽度；
• 浏览器兼容性良好：Chrome 110+、Firefox 119+、Safari 16.4+ 均已原生支持（caniuse 数据）；旧版浏览器可降级为 width: 80% + wrapper 显式宽度的组合方案。

综上，cqw 是解决“跨层级百分比宽度继承”问题的语义化、简洁且面向未来的方法，既保持 HTML 结构清晰，又避免 JS 计算或冗余样式，是现代表单布局的理想实践。