container

CSS container 属性是一个简写属性，它将 container-name 和 container-type 属性组合成一个声明。

.parent {
  container: cards-grid / inline-size;

  /* Equivalent to: */
  container-name: cards-grid;
  container-type: inline-size;
}

组成属性

container 属性是以下属性的简写。

语法

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

• 初始值： none / normal
• 应用于：所有元素
• 继承：否
• 百分比：不适用
• 计算值：如指定
• 规范顺序：根据语法
• 动画：不可动画

如果 <'container-type'> 被省略，它将重置为其初始值 normal，它定义了一个样式容器而不是一个大小容器。 换句话说，默认情况下所有元素都是样式容器，除非我们显式地将 container-type 属性值设置为 size 或 inline-size，这让我们能够查询容器的大小尺寸。

规范

container 属性在 CSS 包含模块级别 3 规范 中定义，该规范目前处于编辑草案状态（截至撰写本文时）。

浏览器支持

关于容器查询的更多信息

相关