前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库CSS container queries nesting resolution
CSS响应式设计

容器查询可以嵌套吗,cqw 到底参考哪一层?

@container 可以嵌套,内层规则须同时满足外层和内层条件。cqw 等单位另按元素附近的合格尺寸容器解析,不能想当然认作外层查询的命名容器。

前端进阶之旅 · 一题精讲更新于 2026.09.29
CSS#响应式设计#容器化
先看核心答案读代码示例
理解线索

条件匹配和长度换算是两件事

  1. 嵌套 @container外层与内层条件构成逻辑与
  2. 命名容器让查询选择特定祖先
  3. cqw相对最近合格查询容器的宽度单位

无合格尺寸容器时,容器单位会退回到对应小视口单位,不会变成零。

核心回答

先记住这个答案

容器查询能嵌套。内层声明只有外层和内层都命中时才应用,两层可通过名称分别查不同的祖先。容器单位则按自己的规则选尺寸基准:1cqw 是最近合格宽度查询容器的宽度的百分之一,并不因为规则写在某个命名 @container 内就自动绑定到那个命名容器。

  • 嵌套查询表示条件同时成立
  • 两层可匹配不同祖先容器
  • cqw 参考最近合格宽度容器
  • 查询命中容器与单位基准要分别判断

两层条件可以看不同外壳

比如页面外层区块需要足够宽,同时卡片自身也要足够宽,才显示复杂详情。给两层容器分别命名可以避免无名查询都选中最近一层。

同时查询区块与卡片CSS
.section { container: section / inline-size; }
.card { container: card / inline-size; }
@container section (min-width: 60rem) {
  @container card (min-width: 28rem) {
    .card__details { display: grid; grid-template-columns: 1fr 1fr; }
  }
}

.card__details 是两层容器的后代。区块足够宽但卡片仍窄时不切换;卡片够宽但区块条件未满足时也不切换。嵌套不是按两次查询依次覆盖,而是两道条件共同限制同一条样式。 如果确实只看卡片宽度,外层查询会徒增限制。嵌套应对应真实的两层需求,而不是因为页面结构里有两层容器就自动写两层。

容器单位另选尺寸基准

在上面的内层规则写 padding: 2cqw,这个长度由匹配尺寸轴的最近合格容器决定。通常是卡片,但若两者之间又插入了一个更近的尺寸容器,单位基准可能变成那层。不要根据 @container section 的名字推断 cqw 一定取区块宽。

排查尺寸时把“哪条查询命中”和“长度单位用哪个容器”分开检查。没有合格尺寸容器时,容器单位退回小视口单位,页面仍可能显示一个值,而非完全失效。

嵌套时还要分清规则作用范围。两层 @container 只是过滤最终的 .card__details 声明,不会改变 .section 或 .card 自身的尺寸。若内层样式反过来让卡片宽度变化,浏览器需要稳定的尺寸查询容器来避免循环。给容器设置 inline-size 类型,并让变化发生在后代,正是这种写法能成立的前提。

回答前,多想一步

容易答错的地方

认为嵌套的内层只会查外层命中的容器
内层会按自己的名称与类型寻找合格祖先;可以是另一层容器。
认为 cqw 跟随当前 @container 名称
容器单位有自己的最近合格尺寸容器选择规则,与规则写在什么名字的查询里不是一回事。
试着用自己的话回答

面试官还会怎么问?

不命名两层容器会怎样?

无名查询各自选择最近合格祖先,可能都落到卡片上,达不到分别检查区块和卡片的目的。

cqi 和 cqw 总相同吗?

横排书写模式中常接近;竖排时行内轴与物理宽度不同,两个单位可能不一样。

没有查询容器时 cqw 等于零吗?

不等于零。规范给容器单位提供对应小视口单位的回退基准。

从一道题,走向一组知识

把知识连起来

响应式设计

容器查询不受支持时,组件该怎样回退?

浏览器支持不足时要保留普通尺寸回退。

响应式设计

容器样式查询怎样根据自定义属性切换样式?

样式查询还可在嵌套条件中检查自定义属性。

参考资料

  • CSS:响应式设计参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 两层条件可以看不同外壳
  3. 容器单位另选尺寸基准
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑