欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

通过 CSS 容器查询找出 - 第二,容器的定义

最编程 2024-10-16 21:20:15
...

上文一直提到容器, 那么我们又怎么知道这个容器指的是哪个? @container容器查询单位 又是基于哪个容器做查询的呢?

这里其实可以使用 container-type 来标记某个元素为容器, 这样的话 @container容器查询单位 就知道要作用于哪个元素了

container-type 属性有三个可选值:

属性值 说明
normal 默认值, 不作为可查询容器使用
inline-size 在容器的 内联轴(水平) 方向上, 建立查询容器; (也就是你只能实时获取到容器 内联轴(水平) 方向上的尺寸)
size 水平和垂直方向都建立可查询容器 (能够实时获取到容器水平垂直方向上的尺寸)

如下代码, .box 对应元素将被设置为容器:

.box {
  container-type: inline-size;
}

chrome 中, 类似 flex 对于设置为容器的元素, 会有一个 tag 标记

image

推荐阅读