带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（19）https://developer.aliyun.com/article/1340876?groupCode=taobaotech
定义一个包含性上下文
要使用 CSS 容器查询特性，首先要定义一个包含性上下文（Containment Context）。这个有点类似于使用Flexbox 和 Grid 布局（定义Flexbox 或 Grid 上下文使用的是 display 属性），只不过，定义一个包含性的上下文使用的不是我们熟知的 display 属性，而是一个新的CSS属性，即 container。
在一个元素上显式使用 container 可以告诉浏览器以后要针对这个容器进行查询，以及具体如何查询该特定的容器。比如，上面演示的示例中，我们在 .card__container 元素上（.card的父容器）显式设置了 container-type 的值为 inline-size：
.card__container { container-type: inline-size 3 }
上面的代码告诉浏览器，可以基于.card__container容器的内联轴（Inline Axis）方向尺寸变化进行查询。也就是说，当.card__container容器宽度大小变化到指定的某个值时，其后代元素的样式就可以进行调整。
container-type 是 container 属性中的一个子属性，另外，还可以显式使用 container-name 来命名你的容器， 即给一个包含性上下文指定一个具体的名称：
.card__container { container-name: card 3 }
这种方式对于同一个上下文中有多个包含性上下文时非常有意义，可以更明确地知道哪些查询会影响元素。 你可以使用简写属性container，只不过需要在 container-type 和 container-name 之间添加斜杠分割符/：
.card__container { container-type: inline-size; container-name: card; } /* 等同于 */ .card__container { container: inline-size / card; }
如果一个容器查询被应用到一个没有定义的包含祖先元素上，查询将无法应用。也就是说，无论是 body 还是 html 元素，都没有默认的回退包含上下文。另外，定义包含上下文名称时不能是 CSS 的关键词，比如 default、inher- it、initial 等。
注意：container-name 可以省略，如果省略将会使用其初始值none，但 container-type 不可省略，如果省略的话则表示未显式声明包含性上下文！
定义一个容器查询
现在我们知道使用 container（或其子属性 container-type和container-name）对一个元素显式声明包含上下文
（对一个元素应用包含性）。
有了这个包含性上下文之后，就可以使用 CSS 的 @ 规则@container来对应用了包含性元素进行查询，即对容器进行查询。@container 规则的使用和 @media 以及 @supports相似：
@container containerName size(width > 45rem) { /* 应用了包含性上下文后代元素的 CSS */ } @container size(width > 45rem) { /* 应用了包含性上下文后代元素的 CSS */ }
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（21）https://developer.aliyun.com/article/1340874?groupCode=taobaotech
