width: 80%失效因始终相对于直接父元素计算，若父级wrapper未设宽且由内容撑开，则80%脱离祖父容器预期；改用cqw需祖先容器声明container-type: inline-size并满足宽度约束。
为什么直接用 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，避免多层容器嵌套时查询歧义
✅ 正确示例：
<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 才能稳定
最常被跳过的一步：确认浏览器 DevTools 的 Elements 面板里，目标祖先元素的 computed 样式中是否出现了 container-type: inline-size。没有？说明声明无效 —— 多半是 display 或 width 条件没满足。
