容器类型

基线 2023

新可用

自 2023年2月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在旧版设备或浏览器中无法使用。

可以使用 **container-type** CSS 属性将元素设置为容器大小查询的查询容器。container-type 用于定义容器查询中使用的大小容器类型。

大小容器会关闭元素从其内容获取大小信息的功能，这对于容器查询避免无限循环非常重要。如果不是这种情况，容器查询中的 CSS 规则可能会更改内容大小，这反过来又可能使查询结果为假并更改父元素的大小，这反过来又可能更改内容大小并将查询翻转回真，依此类推。

必须显式或通过上下文设置容器大小——例如，块级元素、弹性容器和网格容器扩展到其父元素的整个宽度。如果无法获得显式或上下文大小，则具有大小容器的元素将折叠。

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

语法

css

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

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

值

size

在内联和块两个维度上为容器大小查询建立查询容器。将布局容器、样式容器和大小容器应用于容器。

大小容器应用于内联和块方向的元素。可以独立计算元素的大小，忽略子元素。

inline-size

为容器的内联轴上的尺寸查询建立查询容器。将布局、样式和内联大小容器应用于元素。

内联大小容器应用于元素。可以独立计算元素的内联大小，忽略子元素。

normal

元素不是任何容器大小查询的查询容器，但仍然是容器样式查询的查询容器。

正式定义

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

正式语法

container-type = 
  normal       |
  size         |
  inline-size

示例

建立内联大小容器

给定以下 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 @规则编写容器查询将在容器宽度超过 400px 时将样式应用于容器的元素

css

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

规范

规范
CSS 容器模块级别 3 # 容器类型

浏览器兼容性

BCD 表格仅在浏览器中加载