CSS 包含

**CSS 容器**模块定义了容器和容器查询。

容器使页面子树与 DOM 的其余部分隔离。然后,浏览器可以通过优化这些独立部分的渲染来提高性能。

容器查询类似于尺寸媒体查询,但查询基于定义为容器上下文的特定容器元素的尺寸,而不是视口的尺寸。容器查询允许查询容器的大小、属性和属性值,以有条件地应用 CSS 样式。在应用这些条件样式时,可以使用容器查询长度单位,这些单位指定相对于查询容器尺寸的长度。定义了其他属性以启用将特定元素作为查询容器并为其指定特定名称。

参考

属性

@规则和描述符

函数

数据类型

事件

接口

指南

CSS 容器查询

使用 @container 进行容器查询的指南,包括命名容器上下文。

使用 CSS 容器

描述 CSS 容器的基本目标以及如何利用 containcontent-visibility 来获得更好的用户体验。

使用容器大小和样式查询

使用 @container 编写容器大小和样式查询的指南,包括自定义属性的样式查询、查询语法和名称以及嵌套容器查询。

规范

规范
CSS Containment 模块 Level 2
CSS Containment 模块 Level 3

另请参阅