container-type

Baseline 广泛可用 *

此特性已经非常成熟，可以在许多设备和浏览器版本上使用。自 2023 年 2 月起，所有主流浏览器均已支持。

* 此特性的某些部分可能存在不同级别的支持。

元素可以使用 container-type CSS 属性建立为查询容器。container-type 用于定义容器查询中使用的容器上下文类型。可用的容器上下文有：

尺寸：根据通用尺寸或行内尺寸条件（例如最大或最小尺寸、纵横比或方向），选择性地将 CSS 规则应用于容器的子元素。
滚动状态：根据滚动状态条件（例如容器是否是部分滚动的滚动容器，或者容器是否是要吸附到其滚动吸附容器的吸附目标），选择性地将 CSS 规则应用于容器的子元素。

注意：当使用 container-type 和 container-name 属性时，会自动应用 contain 属性的 style 和 layout 值。

语法

css

/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;

/* Two values */
container-type: size scroll-state;

/* Global Values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

值

container-type 属性可以取下面列表中的单个值，或两个值——其中一个必须是 scroll-state，另一个可以是 inline-size 或 size。换句话说，一个元素可以被建立为尺寸查询容器、滚动状态查询容器、两者兼具，或两者都不是。

inline-size

为容器行内轴上的尺寸查询建立查询容器。对元素应用布局、样式和行内尺寸包含。

行内尺寸包含应用于元素。元素的行内尺寸可以独立计算，忽略子元素（请参阅使用 CSS 包含）。

normal

默认值。该元素不是任何容器尺寸查询的查询容器，但仍是容器样式查询的查询容器。

scroll-state

为容器上的滚动状态查询建立查询容器。在这种情况下，元素的尺寸不会独立计算；不应用任何包含。

size

为容器的行内和块尺寸的容器尺寸查询建立查询容器。对容器应用布局包含、样式包含和尺寸包含。

尺寸包含应用于元素的行内和块方向。元素的尺寸可以独立计算，忽略子元素。

正式定义

初始值	`normal`
应用于	所有元素
继承性	否
计算值	同指定值
动画类型	一种颜色

正式语法

container-type = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]

描述

容器查询允许您根据对容器执行的条件查询，选择性地应用容器内的样式。@container at-rule 用于指定对容器执行的测试，以及如果查询返回 true，将应用于容器内容的规则。

容器查询测试仅对具有 container-type 属性的元素执行，该属性将元素定义为尺寸或滚动状态容器，或两者兼具。

容器尺寸查询

容器尺寸查询允许您根据尺寸条件（例如最大或最小尺寸、纵横比或方向），选择性地将 CSS 规则应用于容器的后代。

尺寸容器还会应用尺寸包含——这会关闭元素从其内容获取尺寸信息的能力，这对于容器查询避免无限循环非常重要。如果不是这样，容器查询中的 CSS 规则可能会改变内容尺寸，这反过来可能会使查询评估为假并改变父元素的尺寸，这反过来可能会改变内容尺寸并将查询翻转回真，依此类推。此序列将无限重复。

容器尺寸必须由上下文设置，例如扩展到其父元素完整宽度的块级元素，或显式定义。如果没有可用的上下文或显式尺寸，具有尺寸包含的元素将折叠。

容器滚动状态查询

容器滚动状态查询允许您根据滚动状态条件（例如）：

容器内容是否部分滚动。
容器是否是要吸附到滚动吸附容器的吸附目标。
容器是否通过 position: sticky 定位并粘附到滚动容器的边界。

在第一种情况下，被查询的容器是滚动容器本身。在其他两种情况下，被查询的容器是受祖先滚动容器滚动位置影响的元素。

示例

建立行内尺寸包含

给定以下 HTML 示例，它是一个带有图像、标题和一些文本的卡片组件

html

<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

要创建容器上下文，请将 container-type 属性添加到元素。以下使用 inline-size 值来为容器的行内轴创建包含上下文

css

.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

通过 @container at-rule 编写容器查询将在容器宽度超过 400px 时向容器元素应用样式

css

@container (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

规范

规范
CSS 条件规则模块第五版 # container-type

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 7 月 15 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题