全部学科

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

GO后端

golang gorm gin

通用技术

redis git docker nginx mysql zookeeper rabbitmq

Web前端

TypeScript vue CSS HTML javascript pinia vite

Python全栈

NodeJS全栈

小程序首页

📝 1 篇文章 40 道配套习题

CSS容器查询专题

专题说明

本专题系统讲解CSS容器查询的核心技术，这是CSS组件化开发的关键突破。容器查询允许组件根据其所在容器尺寸而非视口尺寸自适应调整样式，实现真正的组件级响应式设计。

学习目标

理解容器查询与媒体查询的核心区别和应用场景
掌握container-type和container-name属性的配置方法
熟练使用容器查询单位（cqw、cqh、cqi、cqb等）
学会编写容器查询条件语法和嵌套容器处理
掌握容器查询与Flexbox、Grid布局的结合应用
了解浏览器兼容性和降级策略

学习内容

基础概念：容器查询定义、工作原理、与媒体查询对比
容器定义：container-type属性（inline-size、size、normal）、container-name命名
查询单位：cqw、cqh、cqi、cqb、cqmin、cqmax单位详解
条件语法：@container规则、比较运算符、范围查询
嵌套处理：多层容器嵌套、命名容器定位、容器边界控制
布局结合：容器查询与Flexbox、Grid、响应式图片的结合
高级应用：组件库设计、卡片自适应、仪表板布局
兼容性处理：浏览器支持现状、polyfill方案、渐进增强策略

学习建议

确保已掌握媒体查询基础后再学习容器查询
重点理解"组件级响应式"与传统"视口响应式"的区别
在实际项目中对比容器查询与媒体查询的应用效果
注意container-type的 containment 限制对布局的影响
熟悉容器查询单位的书写模式逻辑方向特性

📝 发现内容有误？点击此处直接编辑

📝 配套习题（40 题）

1

单选题

CSS容器查询（Container Queries）与媒体查询（Media Queries）的根本区别是什么？

A

容器查询基于元素自身的尺寸变化，媒体查询基于视口尺寸变化

B

容器查询只能在移动端使用，媒体查询只能在桌面端使用

C

容器查询使用JavaScript实现，媒体查询使用CSS实现

D

容器查询不支持嵌套，媒体查询支持嵌套

2

判断题

使用CSS容器查询时，必须先通过container-type或container属性显式定义容器元素，才能对其子元素应用容器查询样式。

A

对

B

错

3

单选题

以下哪个场景最适合使用容器查询而非媒体查询？

A

根据设备屏幕宽度调整页面整体布局

B

设计可复用的组件，该组件可能被放置在页面不同宽度的区域

C

实现响应式图片的srcset切换

D

隐藏移动端导航栏

4

单选题

关于容器查询与媒体查询的对比，以下说法正确的是？

A

媒体查询更适合组件级响应式设计，容器查询更适合页面级响应式设计

B

容器查询可以完全替代媒体查询，无需两者配合使用

C

媒体查询基于视口（viewport），容器查询基于元素容器（container）

D

容器查询的性能开销比媒体查询小，应优先使用

5

多选题

以下哪些是媒体查询（Media Queries）的特点？

A

基于视口尺寸应用样式

B

需要预先声明容器才能使用

C

使用@media规则定义查询条件

D

样式变化不会因元素在页面中位置不同而改变

E

是实现组件级响应式设计的最佳方案

6

多选题

某电商网站的卡片组件需要在侧边栏（窄）和主内容区（宽）显示不同布局。以下哪些实现方案是合理的？

A

使用媒体查询，根据视口宽度调整卡片布局

B

使用容器查询，根据卡片父容器宽度调整布局

C

为侧边栏和主内容区的卡片分别编写独立的CSS类

D

结合使用媒体查询和容器查询，媒体查询处理页面布局，容器查询处理组件样式

7

填空题

CSS中，媒体查询使用______规则，而容器查询使用__________规则来定义条件样式。

8

单选题

CSS容器查询单位cqw表示什么？

A

容器高度的1%

B

容器宽度的1%

C

容器内联方向尺寸的1%

D

视口宽度的1%

9

多选题

以下关于CSS容器查询单位的描述，哪些是正确的？

A

cqw表示容器宽度的1%

B

cqh表示容器高度的1%

C

cqi表示容器内联方向尺寸的1%

D

cqb表示容器块级方向尺寸的1%

E

cqmin表示视口最小尺寸的1%

10

单选题

在水平书写模式（horizontal-tb）下，容器查询单位cqi和cqb分别对应什么？

A

cqi对应容器宽度，cqb对应容器高度

B

cqi对应容器高度，cqb对应容器宽度

C

两者都对应容器宽度

D

两者都对应容器高度

11

填空题

容器查询单位中，______表示cqi和cqb中较小的值，______表示cqi和cqb中较大的值。

12

单选题

container-type: inline-size的作用是什么？

A

创建一个可以查询任意尺寸属性的容器

B

创建一个只能查询内联方向尺寸的容器，性能开销较小

C

创建一个不受尺寸限制的普通容器

D

创建一个可以查询容器字体大小的容器

13

多选题

以下关于CSS容器类型container-type的描述，哪些是正确的？

A

normal是默认值，元素不作为查询容器

B

inline-size允许查询容器的内联方向尺寸

C

size允许查询容器的宽度和高度

D

设置inline-size后，容器的高度会被限制

E

size类型可以防止容器高度塌陷

14

单选题

以下哪种场景最适合使用container-type: size而非inline-size？

A

响应式卡片组件，只需根据容器宽度调整布局

B

圆形头像组件，需要根据容器的最小尺寸保持正方形

C

文本段落，根据容器宽度调整字体大小

D

侧边栏导航，根据宽度切换展开/折叠模式

15

填空题

CSS容器查询中，container-type属性有三个可选值：______（默认值，不建立查询容器）、___________（允许查询内联方向尺寸）、______（允许查询宽度和高度）。

16

单选题

以下哪个CSS声明可以正确设置一个名为"sidebar"的宽度查询容器？

A

container: inline-size sidebar;

B

container: sidebar inline-size;

C

container-name: sidebar; container-type: inline-size;

D

选项B和C都正确

17

多选题

以下哪些是合法的@container查询语法？

A

@container (min-width: 300px) { ... }

B

@container sidebar (min-width: 300px) { ... }

C

@container (width > 300px) { ... }

D

@container (inline-size > 30em) { ... }

E

@container card and (min-width: 400px) { ... }

18

单选题

当存在多层嵌套的容器时，@container规则查询的是哪个容器？

A

最外层的容器

B

最内层的容器

C

最近的设置了container-type的祖先元素

D

整个页面的根元素

19

填空题

CSS容器查询相关的三个主要属性是：用于设置容器名称的______________、用于设置容器类型的______________、以及可以同时设置名称和类型的简写属性_________。

20

单选题

关于CSS容器查询的浏览器兼容性，以下说法正确的是？

A

容器查询仅在Chrome浏览器中支持，其他浏览器需要polyfill

B

容器查询已在所有主流现代浏览器中得到原生支持，包括Chrome、Firefox、Safari

C

容器查询是实验性功能，需要通过浏览器标志启用

D

容器查询仅支持桌面端浏览器，移动端浏览器暂不支持

21

多选题

使用CSS Container Query Polyfill时，需要注意哪些限制？

A

Polyfill使用JavaScript实现，可能影响页面性能

B

Polyfill完全支持所有容器查询特性

C

需要在CSS文件中重写样式才能生效

D

Polyfill可能无法检测动态DOM变化

E

建议使用CSS.supports()检测原生支持后再加载polyfill

22

多选题

以下哪些方法可以检测浏览器是否支持CSS容器查询？

A

CSS.supports('container-type', 'inline-size')

B

CSS.supports('@container (min-width: 1px)')

C

@supports (container-type: inline-size) { ... }

D

检查window.CSSContainerQuery是否存在

E

@supports container-type: inline-size { ... }

23

填空题

在需要支持旧版浏览器的项目中，可以通过引入________________________（库名）来为不支持容器查询的浏览器提供兼容性支持。

24

多选题

关于容器查询单位（cqw、cqh等）的浏览器兼容性，以下说法正确的有？

A

容器查询单位与@container规则同时获得浏览器支持

B

在不支持容器查询的浏览器中，cqw单位会被视为无效值

C

容器查询单位可以作为fallback值与视口单位配合使用

D

容器查询单位在所有主流浏览器中都已得到支持

25

单选题

实现一个响应式卡片组件，要求在容器宽度大于400px时显示横向布局，小于400px时显示纵向布局。以下CSS代码片段正确的是？

A

.card-container { container: card size; } @container card (min-width: 400px) { .card { flex-direction: row; } }

B

.card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; flex-direction: row; } }

C

.card-container { container: inline-size; } @container (width >= 400px) { .card { flex-direction: row; } }

D

.card { container-type: size; } @container (min-width: 400px) { .card { flex-direction: row; } }

26

多选题

设计一个响应式卡片组件，使用容器查询实现以下效果：窄容器（<300px）时卡片标题字号14px、图片隐藏；宽容器（>=300px）时标题字号18px、图片显示。以下哪些CSS代码是必要的？

A

容器元素设置container-type: inline-size

B

卡片元素设置默认样式font-size: 14px

C

使用@container (min-width: 300px)定义宽容器样式

D

使用媒体单位em定义断点以便适配不同字号

E

图片默认设置display: none

27

多选题

在实现响应式卡片组件时，以下哪些做法是最佳实践？

A

在卡片容器元素上设置container-type: inline-size

B

使用容器查询单位(cqw)设置卡片内部元素的尺寸

C

为卡片设置固定的宽度和高度，确保布局稳定

D

使用命名容器以便在嵌套场景中精确控制

E

将容器查询与Flexbox/Grid布局结合使用

28

填空题

在响应式卡片布局中，常见的容器查询断点设置为：窄容器（小于______px）显示单列布局，中等容器（300-______px）显示双列布局，宽容器（大于500px）显示三列布局。

29

单选题

使用CSS Grid布局实现响应式卡片时，以下哪种容器查询方案最合理？

A

使用容器查询调整grid-template-columns的列数

B

使用容器查询调整每个卡片的grid-column跨度

C

使用容器查询单位cqw设置gap大小

D

以上方案都可以根据实际需求使用

30

单选题

将CSS容器查询与Grid布局结合使用时，相比传统媒体查询方案，主要优势是什么？

A

容器查询可以实现视口级别的响应式Grid布局

B

Grid组件可以自适应不同宽度的容器，无需为每个位置单独编写媒体查询

C

容器查询可以提高Grid布局的渲染性能

D

Grid布局必须使用容器查询才能实现响应式效果

31

多选题

CSS Grid布局可以通过哪些方式实现响应式列数调整？

A

使用grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))

B

使用媒体查询@media (min-width: 600px)调整grid-template-columns

C

使用容器查询@container (min-width: 400px)调整grid-template-columns

D

使用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

E

设置固定的列数，不使用响应式方案

32

多选题

以下CSS代码实现了一个Grid仪表板组件，要求在宽容器时某些面板跨越两列。代码中哪些部分是正确的？

CSS

.dashboard { container-type: inline-size; }
.panels { display: grid; grid-template-columns: 1fr; }
.featured-panel { grid-column: span 1; }
@container (min-width: 600px) {
  .panels { grid-template-columns: repeat(3, 1fr); }
  .featured-panel { grid-column: span 2; }
}

A

容器元素选择正确，在仪表板容器上设置container-type

B

默认Grid设置正确，窄容器时使用单列布局

C

featured-panel的默认span值正确

D

容器查询条件正确，600px作为三列布局的断点合理

E

宽容器时featured-panel跨越两列的设置正确

33

填空题

CSS Grid布局中，grid-template-columns: repeat(_________, minmax(250px, 1fr))可以实现列数自动适应容器宽度，配合________可以精确控制不同容器宽度下的列数和布局结构。

34

单选题

使用容器查询单位cqw设置Grid的gap值：gap: 2cqw。当容器宽度为500px时，gap的实际值是多少？

A

2px

B

5px

C

10px

D

20px

35

单选题

CSS容器查询中，命名容器的主要作用是什么？

A

提高容器查询的性能

B

在嵌套容器场景中精确指定查询目标容器

C

为容器添加语义化标签

D

确保容器样式不会被其他CSS覆盖

36

多选题

以下关于CSS嵌套容器查询的描述，哪些是正确的？

A

多层嵌套容器时，匿名@container查询最近的祖先容器

B

子元素可以同时查询多个祖先容器

C

嵌套容器会导致性能问题，应避免使用

D

使用命名容器可以在嵌套场景中精确选择查询目标

E

容器查询只能查询直接父容器，不能跨级查询

37

多选题

分析以下CSS代码，哪些说法是正确的？

CSS

.outer { container: outer-panel inline-size; }
.inner { container: inner-card inline-size; }
@container outer-panel (min-width: 600px) {
  .component { background: blue; }
}
@container inner-card (min-width: 200px) {
  .component { background: green; }
}

A

外层容器命名为outer-panel，内层容器命名为inner-card

B

当outer-panel宽度>=600px且inner-card宽度>=200px时，.component背景为绿色

C

当outer-panel宽度>=600px但inner-card宽度<200px时，.component背景为蓝色

D

同一元素可以响应多个容器的查询条件

E

容器名称可以使用任意字符串，没有命名限制

38

填空题

CSS容器查询中，查询名为"main-panel"的容器时，语法格式为：@container __________ (min-width: ______px)。

39

单选题

在三层嵌套容器中：outer-container > middle-container > inner-container > target-element。每个容器都设置了container-type: inline-size，target-element使用匿名@container查询。查询目标会是哪个容器？

A

outer-container（最外层）

B

middle-container（中间层）

C

inner-container（最近祖先）

D

同时查询所有三层容器

40

判断题

CSS容器名称可以使用任意字符串，包括数字开头的名称如"1panel"。

A

对

B

错

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验