怎样使用现代CSS容器单位cqw构建随组件缩放的微型布局-css教程-PHP中文网

width: 80%失效因始终相对于直接父元素计算，若父级wrapper未设宽且由内容撑开，则80%脱离祖父容器预期；改用cqw需祖先容器声明container-type: inline-size并满足宽度约束。

怎样使用现代css容器单位cqw构建随组件缩放的微型布局

为什么直接用 `width: 80%` 在嵌套 wrapper 里会失效

当你给一个 input 设置 width: 80%，它永远相对于**直接父元素**计算。如果父级是 display: inline-block 的 #wrapper，而这个 wrapper 又没设宽度，它的宽度就由内容撑开（比如图标+文字共 200px），那 80% 就变成 160px —— 和你期望的“占祖父容器 80%”完全脱钩。

常见错误现象包括：

表单控件在不同卡片中宽度忽大忽小，调试时发现父 wrapper 的 computed width 每次都不一样
加了 position: relative 后，width: 100% 突然缩成一条线
用 vw 临时顶替，结果侧边栏里的输入框跟着整个浏览器窗口变宽，溢出容器

必须声明 `container-type: inline-size` 的祖先容器

cqw 不是全局单位，它只在明确被标记为“尺寸容器”的祖先链中生效。这个容器必须是你真正想锚定的那层（比如卡片根元素、表单外层容器或微前端子应用挂载点）。

关键要求：

该容器需有非 auto 的宽度上下文：支持 width、max-width、min-width、inline-size 或 flex-basis（如 flex: 0 0 320px）
不要写在 display: contents 或 display: inline 元素上——它们不构成布局容器
命名不是必须的，但推荐加 container-name，避免多层容器嵌套时查询歧义

✅ 正确示例：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

<div class="card" style="width: 320px; container-type: inline-size; container-name: card;">
<br><div class="wrapper" style="position: relative; display: inline-block;">
<br><input type="text" style="width: 90cqw; box-sizing: border-box;"><br>
</div>
<br>
</div>

用 `cqw` 替代百分比时的典型场景与参数差异

cqw 是“容器内联方向宽度的 1%”，和 % 行为完全不同：

80% → 相对于直接父元素宽度（可能极小）
80cqw → 相对于最近的、启用了 container-type: inline-size 的祖先宽度（如卡片固定为 320px，则恒为 256px）
80vw → 相对于整个视口宽度（1920px 下就是 1536px，极易溢出）

适用场景包括：

微前端子应用内部表单控件，需适配宿主容器动态 resize
仪表盘卡片中的数值标签字号：用 font-size: clamp(0.875rem, 4cqi, 1.125rem)（cqi 同理，基于容器内联尺寸）
带装饰图标的输入框，图标用 position: absolute 定位，主体宽度仍需锚定卡片而非 wrapper

容易忽略的兼容性与降级细节

Chrome 110+、Firefox 119+、Safari 16.4+ 均已原生支持 cqw 和 container-type，但仍有几个硬伤点：

旧版 Safari（16.3 及更早）会静默忽略 cqw，回退到 width: auto，导致控件塌缩 —— 必须加降级：width: 80%; width: 80cqw;（后者覆盖前者）
box-sizing: border-box 不是可选的：若未设置，padding 和 border 会额外增加 80cqw 的总宽度，破坏对齐
容器本身若用 width: 100% 且无父级约束，cqw 就失去基准 —— 这类“浮动容器”必须配合 max-width 或 flex context 才能稳定