1. Web
  2. CSS
  3. container

container

Baseline 已广泛支持

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

container 简写 CSS 属性将元素设置为查询容器，并指定在容器查询中使用的包含上下文的名称和类型。

构成属性

此属性是以下 CSS 属性的简写：

语法

css
/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

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

值

<container-name>

包含上下文的名称（区分大小写）。有关语法的更多详细信息，请参见 container-name 属性页面。

<container-type>

包含上下文的类型。有关语法的更多详细信息，请参见 container-type 属性页面。

正式定义

初始值作为简写中的每个属性
应用于所有元素
继承性否
百分比作为简写中的每个属性
计算值作为简写中的每个属性
动画类型作为简写中的每个属性

正式语法

container = 
  <'container-name'> [ / <'container-type'> ]?  

<container-name> = 
  none             |
  <custom-ident>+  

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

示例

建立行内尺寸包含

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

html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

创建容器上下文的显式方法是声明一个 container-type，带有一个可选的 container-name

css
.post {
  container-type: inline-size;
  container-name: sidebar;
}

container 简写旨在使这更容易在一个声明中定义

css
.post {
  container: sidebar / inline-size;
}

然后，您可以使用 @container 规则按名称定位该容器

css
@container sidebar (width >= 400px) {
  /* <stylesheet> */
}

规范

规范
CSS 条件规则模块第五版
# 容器简写

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面由 MDN 贡献者 最后修改于 。

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