CSS 包含
**CSS 容器**模块定义了容器和容器查询。
容器使页面子树与 DOM 的其余部分隔离。然后,浏览器可以通过优化这些独立部分的渲染来提高性能。
容器查询类似于尺寸媒体查询,但查询基于定义为容器上下文的特定容器元素的尺寸,而不是视口的尺寸。容器查询允许查询容器的大小、属性和属性值,以有条件地应用 CSS 样式。在应用这些条件样式时,可以使用容器查询长度单位,这些单位指定相对于查询容器尺寸的长度。定义了其他属性以启用将特定元素作为查询容器并为其指定特定名称。
参考
属性
@规则和描述符
@container
@container
描述符:aspect-ratio
block-size
height
inline-size
方向
width
函数
数据类型
事件
接口
指南
- CSS 容器查询
-
使用
@container
进行容器查询的指南,包括命名容器上下文。 - 使用 CSS 容器
-
描述 CSS 容器的基本目标以及如何利用
contain
和content-visibility
来获得更好的用户体验。 - 使用容器大小和样式查询
-
使用
@container
编写容器大小和样式查询的指南,包括自定义属性的样式查询、查询语法和名称以及嵌套容器查询。
相关概念
- 布局和包含块
- 块级格式化上下文
- CSS 媒体查询 模块
- CSS 过渡 模块
- CSS 盒子大小模块
- CSS 计数器样式 模块
- 使用 CSS 计数器 指南
- CSS 嵌套 模块
- CSS 嵌套 @规则 指南
规范
规范 |
---|
CSS Containment 模块 Level 2 |
CSS Containment 模块 Level 3 |