容器查询允许你针对网页中的特定部分应用样式，从而根据容器的大小而非视口的大小来创建可定制的、具有响应式特性的布局。
本指南将向你介绍这种用于实现响应式设计的实用方法。同时，你还会学习到CSS中关于滚动效果的相关知识。
先决条件
在开始学习可滚动查询及基于容器的滚动效果之前，请确保你已经具备以下条件：
-
对CSS的基本概念及关键术语有了解——需要理解诸如`height`、`overflow`等属性，以及它们如何影响页面布局。
-
具有编写纯CSS代码的经验——能够熟练使用选择器、规则集，并独立应用样式，而不依赖任何框架。
-
对HTML结构有基本的了解——因为滚动行为与父元素密切相关，因此理解容器元素与子元素之间的交互关系是非常重要的。
-
（可选但有帮助） 对响应式设计概念有所了解，这样你就能明白可滚动的父元素是如何融入整体布局策略中的。
我们将涵盖的内容：
如何使用容器查询
通常，在设计响应式网页时，我们会使用媒体查询根据视口的宽度来为页面应用样式。但容器查询的不同之处在于，它是根据特定容器元素或父元素的尺寸来应用样式的。
以导航栏为例。假设当你希望当`nav`元素的大小小于`450px`时，其链接能够自动换行显示；同时，当屏幕分辨率低于`450px`时，还要改变导航栏的背景颜色。
要想实现这个效果，首先需要将所有的链接包裹在一个父级`nav`元素内：
<nav>
<img src="" alt="logo" />
<ul>
<a href="">>首页a href="">>关于我们
<>a href="">>服务项目
<>a href="">>联系我们
</ul>
</nav>
接下来，使用`container-type`属性在父级`nav`元素上定义一个容器查询。该属性可以取以下几种值之一：
-
inline-size：当您想要追踪页面上父元素的横向尺寸时使用。 -
block-size：当您想要追踪页面上父元素的纵向尺寸时使用。 -
容器滚动状态：当您想要在元素滚动时追踪父元素的状态，或者当具有
sticky定位方式的元素粘在屏幕上时使用。
在大多数情况下，您需要根据元素的横向尺寸来调整其样式，因此必须在父元素上使用container-type属性，这样才能根据父元素的尺寸来应用相应的样式。在这里，我们使用nav作为父元素。
nav {
container-type: inline-size;
}
接下来，您需要使用at符号(@)后跟上container关键字来定义一个容器查询。
然后检查父容器nav的宽度是否小于450px。如果条件成立，就需要为链接元素添加flex-wrap属性：
@container (width > 450px) {
ul {
flex-wrap: wrap;
}
}
容器查询与媒体查询的区别
请看下面的媒体查询代码：
@media (width < 450px) {
nav {
background: green;
}
}
在上述媒体查询中，当屏幕宽度小于450px时，nav元素的背景颜色会变为green。
而对于容器查询来说，当nav元素的尺寸小于450px时，这些元素会堆叠在一起显示。
因此，两者的区别在于：媒体查询关注的是整个屏幕的尺寸，而容器查询关注的是父元素的尺寸。
示例：
容器滚动状态
您也可以使用容器查询来在元素滚动时为其应用样式，或者当具有sticky定位方式的元素粘在屏幕上时为其调整样式。
注意：目前大多数浏览器都支持容器scroll-state功能，但支持率并不高，大约只有71%的浏览器支持这一特性，Safari和Firefox等浏览器则不支持。因此，在实际开发中使用这一功能时需要谨慎。
可滚动查询
可滚动查询用于检测父元素的滚动条行为。如果父元素具有滚动功能，那么就会应用与之相关的容器查询规则。
要使用可滚动的查询功能，你需要有一个具有滚动功能的父元素。HTML非常适合这种用途，因为默认情况下，HTML本身就具备滚动功能。
要想让某个元素具备可滚动性，可以为该元素设置一个固定的高度，并使用 `overflow` 属性。这样，当内容超出所定义的空间时，就会出现滚动条。
示例：
我们将设计一个简单的页面：当用户向下滚动页面时，侧边栏中的目录会显示出来；而当用户返回页面顶部时，目录又会隐藏起来。
首先，需要将 HTML 设置为 `scroll-state` 类型的容器：
html {
container-type: scroll-state;
}
接下来，为目录部分设置样式，并将其放置在页面的右上角。
.toc {
position: fixed;
top: 5rem;
left: 90%;
align-self: start;
opacity: 0;
}
你将目录放在了页面的右侧，并通过 `top: 5rem` 将其固定在屏幕的顶部；同时，通过设置 `opacity: 0`，使得目录在默认情况下是隐藏的。
现在需要检查一下：是否可以滚动到容器的顶部。如果可以，那就取消隐藏目录：
@container scroll-state.scrollable: top) {
.toc {
transition: opacity 0.4s linear;
opacity: 1;
}
}
你首先定义了一个容器查询规则，然后使用了 `scroll-state` 关键字来指定这一规则。这样就可以判断父元素上的滚动条是否可以滚动。
使用 `scrollable` 属性可以指定滚动的方向。将其设置为 `top` 时，表示容器可以向上滚动；而设置为 `bottom` 时，则表示容器可以向下滚动。
你可以看到，只要存在向上滚动的空间，目录就会显示出来；而当无法向上滚动时，目录就会被隐藏。
你还可以使用 `y` 参数来指定容器在垂直方向上的滚动范围，从而判断是否可以在上下两个方向上滚动。
示例：
从这个示例中可以看出，由于容器可以在上下两个方向上滚动，因此目录始终会显示在屏幕上。
无法正常工作的查询规则
“粘性查询”用于检测那些定位方式为sticky的元素，当这些元素固定在页面顶部时，就会应用相应的样式。
如果你想要为那些处于粘性位置的元素设置特定的样式，并且希望它们在固定在页面顶部时能够显示这些样式，那么这种技术非常有用。
示例：
我们将设计一个简单的导航栏，当它固定在屏幕顶部时，其box-shadow效果会发生变化。
在这里，我们需要设置一个包裹nav元素的容器，并将其定义为容器查询对象，同时将其定位方式设置为sticky，这样就能判断该元素是否固定在屏幕顶部。
header {
position: sticky;
top: 0rem;
container-type: scroll-state;
}
接下来，你可以定义@container规则，以便在该元素固定在屏幕上时执行相应的操作：
@container scroll-state(stuck:top) {
nav {
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.55),
0 1px 0 rgba(255, 255, 255, 0.06) inset;
background-color: #0a0a0a;
}
}
我们首先检查了scroll-state的行为，然后在括号内判断那些定位方式为sticky的元素是否确实固定在页面顶部。如果满足这个条件，nav元素的背景颜色就会发生变化，并且会添加box-shadow效果。
最终的效果应该如下所示：
默认情况下，nav元素并没有box-shadow效果，但当你滚动页面时，如果nav元素固定在屏幕顶部，那么在@container规则中定义的box-shadow效果以及其他样式就会应用到该元素上。
总结
通过这篇文章，你学会了如何使用容器查询来创建更加可定制且具有响应式的设计，同时还了解了如何实现一些酷炫的滚动效果。
本指南中提供的示例并不是使用容器查询所能实现的所有功能。这些示例只是为了帮助你思考其他应用场景，从而让你能够根据自己的具体需求来灵活运用容器查询技术。
目前，大多数主流浏览器都支持容器查询技术，其兼容率已经达到了95%。