【CSS in Depth 2 精译_063】10.2 深入理解 CSS 容器查询中的容器

news2024/12/25 9:29:47

当前内容所在位置（可进入专栏查看其他译好的章节内容）

  • 【第十章 CSS 容器查询】 ✔️
    • 10.1 容器查询的一个简单示例
      • 10.1.1 容器尺寸查询的用法
    • 10.2 深入理解容器 ✔️
      • 10.2.1 容器的类型 ✔️
      • 10.2.2 容器的名称 ✔️
      • 10.2.3 容器与模块化 CSS ✔️
    • 10.3 与容器相关的单位
    • 10.4 容器样式查询的用法
    • 10.5 本章小结

文章目录

  • 10.2 深入理解容器 A closer look at containers
    • 10.2.1 容器的类型 Container types
      • 10.2.1.1 inline-size 容器类型 The inline-size container type
      • 10.2.1.2 size 容器类型 The size container type
    • 10.2.2 容器的名称 Container names
    • 10.2.3 容器与模块化 CSS（Containers and modular CSS）

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
本篇将深入探讨容器查询中的核心概念——容器。通过对容器的分类、命名及其在模块化 CSS 中的应用，帮助您打通容器查询的“任督二脉”。第一次接触容器查询时，我也有过作者提到的提问：如果容器查询真的可以实现，那怎么避免页面渲染出现死循环呢？真到实现它的时候，才发现还需要很多前提条件，比如引入 containment 的概念（MDN 译作【局限】，个人感觉稍欠准确，因此在文中给出术语原文）。相信学完本节，您一定会对 CSS 容器有更深刻的理解。

10.2 深入理解容器 A closer look at containers

上一节定义容器时，我们给容器指定了一个名称和对应的容器类型。本节我们将深入考察这些属性的行为模式，并了解它们的具体用途。虽然前面的示例并不难，但在使用容器时，也需要了解一些特定的限制；深入理解容器类型带来的影响尤为重要。

10.2.1 容器的类型 Container types

十多年来，浏览器厂商一直认为这个功能永远无法实现，主要是因为他们担心会产生无限循环。假设有这样一个场景，需要查询一个高度小于 300px 的容器；当符合查询条件时，其中一个元素的字号会放大至 2em，这反过来又将增加该元素的高度，从而撑大所在容器的高度，最终导致容器查询条件匹配失败——进而字号回落到原始大小，然后查询条件再次触发，循环往复，永无休止。

而在容器查询的设计过程中，决不允许出现这样的无限循环。为此，CSS 引入了 局限（containment） 的概念。它为部分隔离 DOM 子节点和页面其余部分提供了一种有效途径。

在容器查询的上下文或语境中，这就意味着不能使用容器查询来改变被查容器的尺寸大小，并且该尺寸的设置也只能通过不依赖于其子元素的方式来予以明确。

该限制的具体表现取决于容器类型的具体取值。属性 container-type 的合法值有三个：normal、inline-size 以及 size；其初始值为 normal，表示该元素并非查询容器，因此也无法对其进行容器查询。

注意

也可以通过 contain 属性（property）直接设置元素的局限。但这往往并不常用，因为指定 container-type 属性就能同步设置所需的局限。有关局限的更多设置，详见 MDN 在线文档 https://mng.bz/WEg4。

10.2.1.1 inline-size 容器类型 The inline-size container type

令容器类型的值为 inline-size，正如在之前的示例中演示的那样，可以仅凭行内尺寸（即元素宽度）来实现容器查询。设为 inline-size 的容器也无法使用基于高度的容器查询。在大多数实际应用中，inline-size 往往就是开发者需要的容器类型。容器的高度仍然会根据其内容的高度正常确定，您也可以根据可用空间的宽度调整样式，但容器中的任何内容都无法改变容器的行内尺寸。而这也正是 inline-size 起到的作用。

在常规文档流（normal document flow）中，块级元素的宽度将自动填满所有可用的空间。这就为容器查询提供了一个已知的宽度。在某些情况下，或许需要添加额外的样式声明来明确指定宽度，例如当容器为一个弹性元素时这一点尤为重要：务必确保弹性元素设置了 flex-basis 或 flex-grow 属性的值，否则容器宽度将为零，导致后续容器查询无法进行。

10.2.1.2 size 容器类型 The size container type

若 container-type 的值为 size，则容器将在行内方向（inline direction）与块级方向（block direction）上实现全尺寸局限（full-size containment）。换句话说，浏览器将无法通过子元素来确定其容器的高度；相反，子元素会根据容器的高度进行查询。

容器类型指定为 size 后，容器的高度就需要以某种方式显式地定义，例如直接设置 height 或 min-height 属性；或者通过容器外部的样式声明来定义其高度大小，比如网格布局或 Flexbox 布局；再或者，如果容器用到了绝对定位或固定定位，也可以利用 inset 属性来指定容器高度。而当上述方法都无法确定容器高度时，容器高度将为零，基于该高度的容器查询也将无法正常工作。

一般来说，在大多数情况下，容器类型都应该设为 inline-size。而当容器为网格布局或 Flexbox 的一部分、并且高度可以明确确定时，如果想针对高度做容器查询，则可以将容器类型设为 size。但大多数响应式设计都是基于行内尺寸实现的，因此通常也不需要这样设置。

10.2.2 容器的名称 Container names

指定容器名称后，就可以针对具体的容器实现容器查询。为此 CSS 提供了很大的自由度，既可以为某容器指定一个唯一的名称，同时也可以为多个容器复用相同的名称。

其中一个好的做法是使用一个通用名称，例如指定为 layout，并将其应用到页面上的大多数（或者所有）容器。在大多数情况下，它们多半就是您要查询的目标容器，因为您大概率希望模块能根据现有宽度做出响应。容器查询将沿 DOM 树向上查找，并选中指定名称的最近的祖先级容器（如图 10.4 所示）。

图 10.4 容器查询将选中所有匹配名称中距离最近的容器

【图 10.4 容器查询将选中所有匹配名称中距离最近的容器】

遇到需要不同容器的特殊情况时，也可以指定不同的名称，甚至可以对同一容器指定多个容器名称。例如 container: layout sidebar / inline-size 就将名称 layout 和 sidebar 同时指定给该容器，这样一来，带有这两个名称中任意一个的 @container 查询都将与该容器成功匹配。

容器查询还会绕过所有名称匹配失败的容器，如图 10.5 所示。通常情况下，我们要匹配的都是距离最近的容器；当需要对某个特定容器做出响应时，就可以使用此类技术。

图 10.5 容器查询忽略了名称匹配失败的容器

【图 10.5 容器查询忽略了名称匹配失败的容器】

为容器添加名称不是必需操作，您也可以利用 container-type: inline-size 来建立一个不带名称的容器，并在容器查询时省略名称（如 @container (min-width: 450px)）；此时浏览器将查找 DOM 树，直至找到第一个容器。

注意

使用简写属性 container 时必须指定容器名称。而定义一个不带名称的容器只能通过 container-type 属性实现。

虽然可以在容器查询中省略容器名称（例如写作 @container (width > 400px) 完全有效），但我还是强烈建议您养成为所有容器命名的习惯。对于不带名称的容器查询，浏览器会从当前元素开始，向上遍历 DOM 树中第一个匹配到的容器，无论该容器是否命名。

10.2.3 容器与模块化 CSS（Containers and modular CSS）

在为网站构建模块化 CSS 的过程中，开发人员应当采取某种策略来确保容器能以可预测的方式进行定义，以便后续对模块进行有效的查询。每当一个模块存在某个包裹元素、并且可能包含其他模块时，我更倾向于将该包裹元素视为容器。

例如在媒体模块中，media__body 用于装填内容，同时也可能包含其他模块。因此在这种情况下，我通常会将 media__body 定义为一个容器，这样就能对放置其中的任何内容作出适当响应。

根据如下代码清单 10.4 所示的示例代码，同步更新您的本地示例页面。该代码片段对容器进行了定义，同时还对媒体模块的正文部分（media body）设置了一个 flex-grow 属性值，以确保其具有确定的宽度。

代码清单 10.4 将媒体模块中的正文部分设置为容器

@layer modules {
  .media {
    padding: 1.5rem;
    background-color: #eee;
    border-radius: 5px;
  }

  .media__image {
    margin-inline: auto;
  }

  .media__body {
    container: layout / inline-size;
    flex-grow: 1;
  }
}

这样，该模块就可以放置后期可能需要嵌入其中的其他模块了，甚至可以在一个模块内嵌套多个媒体模块，它们会根据情况分别做出响应——尽管没有什么实用价值，但看到这些模块的实际效果也挺有意思的。采用这种方法时，还需要确保任何布局样式也能定义容器，就像对 .l-page 设置布局时那样（详见 10.1 小节代码清单 10.3）。

这种方法的另一个替代方案，是通过各自带有的容器来定义模块。例如，用 <div class="media-container"> 来包裹媒体模块，并指定 container-type: inline-size 来设计样式。但我不太喜欢给众多模块添加额外的 HTML 标记，因此这种方法用得也不多。

在使用模块时，容器查询的表现向来优于媒体查询。只要能在整个页面中始终如一地定义好容器，往往就能将它们用于所有模块。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

第 1 版第 2 版
读者评分原版：4.7（亚马逊）；中文版：9.3（豆瓣）原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间原版：2018 年 3 月；中文版：2020 年 4 月原版：2024 年 7 月；中文版：暂无，待出版
原价原版：$44.99；中文版：￥139.00原版：$59.99；中文版：暂无，待出版
现价原版：$36.49；中文版：￥52.54 起步原版：$52.09；中文版：暂无，待出版
原版国内预订起步价 ￥461.00起步价 ￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

  • 第一章 层叠、优先级与继承（已完结）
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位（已完结）
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型（已完结）
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局（已完结）
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局（已完结）
    • 5.1 构建基础网格
    • 5.2 网格结构剖析 （上）
      • 5.2.1 网格线的编号（下）
      • 5.2.2 网格与 Flexbox 配合（下）
    • 5.3 两种替代语法
      • 5.3.1 命名网格线
      • 5.3.2 命名网格区域
    • 5.4 显式网格与隐式网格（上）
      • 5.4.1 添加变化 （中）
      • 5.4.2 让网格元素填满网格轨道（下）
    • 5.5 子网格（全新增补内容）
    • 5.6 对齐相关的属性
    • 5.7 本章小结
  • 第六章 定位与堆叠上下文（已完结）
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单（上）
      • 6.3.2 创建 CSS 三角形（下）
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序（上）
      • 6.4.2 用 z-index 控制堆叠顺序（上）
      • 6.4.3 深入理解堆叠上下文（下）
    • 6.5 粘性定位
    • 6.6 本章小结
  • 第七章 响应式设计（已完结）
    • 7.1 移动端优先设计原则（上篇）
      • 7.1.1 创建移动端菜单（下篇）
      • 7.1.2 给视口添加 meta 标签（下篇）
    • 7.2 媒体查询（上篇）
      • 7.2.1 深入理解媒体查询的类型（上篇）
      • 7.2.2 页面断点的添加（中篇）
      • 7.2.3 响应式列的添加（下篇）
    • 7.3 流式布局
    • 7.4 响应式图片
    • 7.5 本章小结
  • 第八章 层叠图层及其嵌套
    • 8.1 用 layer 图层来操控层叠规则（上篇）
      • 8.1.1 图层的定义（上篇）
      • 8.1.2 图层的顺序与优先级（下篇）
      • 8.1.3 revert-layer 关键字（下篇）
    • 8.2 层叠图层的推荐组织方案
    • 8.3 伪类 :is() 和 :where() 的用法
    • 8.4 CSS 嵌套的使用
      • 8.4.1 嵌套选择器的使用
      • 8.4.2 深入理解嵌套选择器
      • 8.4.3 媒体查询及其他 @规则 的嵌套
    • 8.5 本章小结
  • 第九章 CSS 的模块化与作用域
    • 9.1 模块的定义
      • 9.1.1 模块和全局样式
      • 9.1.2 一个简单的 CSS 模块
      • 9.1.3 模块的变体
      • 9.1.4 多元素模块
    • 9.2 将模块组合为更大的结构
      • 9.2.1 模块中多个职责的拆分
      • 9.2.2 模块的命名
    • 9.3 CSS 的作用域
      • 9.3.1 CSS 作用域的就近原则
      • 9.3.2 划定作用域的边界
      • 9.3.3 CSS 中的隐式作用域
      • 9.3.4 关于 CSS 作用域与层叠图层
    • 9.4 CSS 模式库
    • 9.5 本章小结

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2252316.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

今天我们来聊聊Maven中两个高级的概念—— 插件和目标

今天我们来聊聊Maven中两个高级的概念—— 插件和目标

插件&#xff08;plugin&#xff09; Maven的核心是一个插件执行框架;所有的工作都是由插件完成的。 Maven中Plugin分为两种类型&#xff1a; build类型Plugin只能在build阶段执行&#xff0c;在POM中需要在 <build/> 标签下进行配置。 reporting类型&#xff1a;在si…
阅读更多...
【触想智能】自动售票机选择工控一体机配套的原因分析

【触想智能】自动售票机选择工控一体机配套的原因分析

自动售票机是现代公共交通系统中常见的设备之一&#xff0c;它能够方便、快速地为乘客提供票务服务。为了实现高效、可靠的运营&#xff0c;许多自动售票机都采用工控一体机作为核心控制硬件。 触想工控一体机TPC-W200系列 下面&#xff0c;触想智能小编为大家分析为什么自动售…
阅读更多...
[计算机网络] HTTP/HTTPS

[计算机网络] HTTP/HTTPS

一. HTTP/HTTPS简介 1.1 HTTP HTTP&#xff08;超文本传输协议&#xff0c;Hypertext Transfer Protocol&#xff09;是一种用于从网络传输超文本到本地浏览器的传输协议。它定义了客户端与服务器之间请求和响应的格式。HTTP 工作在 TCP/IP 模型之上&#xff0c;通常使用端口 …
阅读更多...
element-ui的下拉框报错：Cannot read properties of null (reading ‘disabled‘)

element-ui的下拉框报错：Cannot read properties of null (reading ‘disabled‘)

在使用element下拉框时&#xff0c;下拉框option必须点击输入框才关闭&#xff0c;点击其他地方报错&#xff1a;Cannot read properties of null (reading disabled) 造成报错原因&#xff1a;项目中使用了el-dropdown组件&#xff0c;但是在el-dropdown里面没有定义el-dropdo…
阅读更多...
新一代零样本无训练目标检测

新一代零样本无训练目标检测

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;编程探索专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月2日21点02分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文链接 点击开启你的论文编程之旅h…
阅读更多...
30.100ASK_T113-PRO 用QT编写视频播放器(一)

30.100ASK_T113-PRO 用QT编写视频播放器(一)

1.再buildroot中添加视频解码库 X264, 执行 make menuconfig Target packages -->Libraries --> Multimedia --> X264 CLI 还需要添加 FFmpeg 2. 保存,重新编译 make all 3.将镜像下载开发板
阅读更多...
Python办公自动化，批量生成Excel案例数据集

Python办公自动化，批量生成Excel案例数据集

在数据分析的世界里&#xff0c;数据是核心&#xff0c;而如何高效地生成和处理数据则成为每位数据分析师必备的技能之一。今天&#xff0c;我们要探讨一个有趣的话题——“造数”。 但这里的“造数”并非意味着编造数据&#xff0c;而是指在确保数据安全的前提下&#xff0c;…
阅读更多...
在线绘制Nature Communication同款双色、四色火山图，突出感兴趣的基因

在线绘制Nature Communication同款双色、四色火山图，突出感兴趣的基因

导读&#xff1a;火山图通常使用三种颜色分别表示显著上调&#xff0c;显著下调和不显著。通过为特定的数据点添加另一种颜色&#xff0c;可以创建双色或四色火山图&#xff0c;从而更直观地突出感兴趣的数据点。 《Nature Communication》文章“Molecular and functional land…
阅读更多...
【大语言模型】ACL2024论文-23 检索增强的多语言知识编辑

【大语言模型】ACL2024论文-23 检索增强的多语言知识编辑

【大语言模型】ACL2024论文-23 检索增强的多语言知识编辑 目录 文章目录 【大语言模型】ACL2024论文-23 检索增强的多语言知识编辑目录摘要研究背景问题与挑战如何解决核心创新点算法模型实验效果&#xff08;包含重要数据与结论&#xff09;相关工作后续优化方向 后记 检索增强…
阅读更多...
ETSI EN 300328 标准的一些笔记

ETSI EN 300328 标准的一些笔记

ETSI - European Telecommunications Standards Institute 欧洲电信标准化协会 ETSI EN 300328 是欧洲协调标准&#xff0c;此标准适用于工作在2.4G频段范围内运行的宽频传输系统和设备的无线电频谱。 例如 WIFI、Zigbee、蓝牙、 (国内的星闪)。不涵盖UWB。 符合了EN 300328标…
阅读更多...
VSCode：代码格式化插件

VSCode：代码格式化插件

settings.json文件中添加如下配置并保存 {"workbench.sideBar.location": "left","cssrem.rootFontSize": 80,"git.ignoreWindowsGit27Warning": true,"eslint.codeAction.showDocumentation": {"enable": true…
阅读更多...
Redis实现限量优惠券的秒杀

Redis实现限量优惠券的秒杀

核心&#xff1a;避免超卖问题&#xff0c;保证一人一单 业务逻辑 代码步骤分析 全部代码 Service public class VoucherOrderServiceImpl extends ServiceImpl<VoucherOrderMapper, VoucherOrder> implements IVoucherOrderService {Resourceprivate ISeckillVoucher…
阅读更多...
Github提交Pull Request教程 Git基础扫盲（零基础易懂）

Github提交Pull Request教程 Git基础扫盲（零基础易懂）

1 PR是什么&#xff1f; PR&#xff0c;全称Pull Request&#xff08;拉取请求&#xff09;&#xff0c;是一种非常重要的协作机制&#xff0c;它是 Git 和 GitHub 等代码托管平台中常见的功能&#xff0c;被广泛用于参与社区贡献&#xff0c;从而促进项目的发展。 PR的整个过…
阅读更多...
大数据技术Kafka详解 ② | Kafka基础与架构介绍

大数据技术Kafka详解 ② | Kafka基础与架构介绍

目录 1、kafka的基本介绍 2、kafka的好处 3、分布式发布与订阅系统 4、kafka的主要应用场景 4.1、指标分析 4.2、日志聚合解决方法 4.3、流式处理 5、kafka架构 6、kafka主要组件 6.1、producer(生产者) 6.2、topic(主题) 6.3、partition(分区) 6.4、consumer(消费…
阅读更多...
Docker中配置Mysql主从备份

Docker中配置Mysql主从备份

Mysql配置主从备份 一、Docker中实现跨服务器主从备份二、配置步骤1.配置主库2.配置从库3.遇到问题3.其它使用到的命令 一、Docker中实现跨服务器主从备份 在 Docker 中配置 MySQL 主从备份主要通过 MySQL 主从复制实现 二、配置步骤 1.配置主库 # 进入mysql主库容器 docke…
阅读更多...
组态王实现设备OEE数据采集的项目总结

组态王实现设备OEE数据采集的项目总结

组态王实现设备OEE数据采集的项目总结 方案设计硬件设计软件设计 难点总结数据通讯数据转换报表数据存储 项目拓展 最近在做一个项目&#xff0c;关于采集设备OEE数据。陆陆续续做了小半个月&#xff0c;现在算告一段落&#xff0c;特整理总结。 方案设计 硬件设计 本项目是…
阅读更多...
C++《set与map》

C++《set与map》

在之前我们已经学习了解了CSTL当中的string和vector等容器&#xff0c;现在我们已经懂得了这些容器提供的接口该如何使用&#xff0c;并且了解了这些容器的底层结构。接下来我们在本篇当中将继续学习STL内的容器set与map&#xff0c;在此这两个容器与我们之前学习的容器提供的成…
阅读更多...
FPGA 15 ，Xilinx Vivado 的基本使用，使用 Vivado 点亮LED灯，具体实现（使用赛灵思 Vivado编写 Verilog 代码）

FPGA 15 ，Xilinx Vivado 的基本使用，使用 Vivado 点亮LED灯，具体实现（使用赛灵思 Vivado编写 Verilog 代码）

目录 前言 我们都知道 Xilinx Vivado 是一款强大的 FPGA 集成开发环境&#xff0c;支持从设计输入、综合、实现到仿真的全流程。它兼容 Verilog 和 VHDL 等硬件描述语言&#xff0c;具备高层次综合功能&#xff0c;能有效提升复杂数字系统的设计效率和性能优化。这里来分享记…
阅读更多...
VxLAN 集中式网关配置实验

VxLAN 集中式网关配置实验

一、拓扑&#xff1a; 二、配置思路&#xff1a; 1、CE1、2、3 配置 IGP&#xff0c;如 RIP 2、CE1、3 配置 BD 域并绑定二层 VNI&#xff0c;起用 NVE 并建立 VxLAN 隧道&#xff1a;源是自己的环回口&#xff0c;对端是 CE2、3 的环回口&#xff0c;用二层 VNI 联接&#x…
阅读更多...
qml项目创建的区别

qml项目创建的区别

在Qt框架中&#xff0c;你可以使用不同的模板来创建应用程序。你提到的这几个项目类型主要针对的是Qt的不同模块和用户界面技术。下面我将分别解释这些项目类型的区别&#xff1a; 根据你提供的信息&#xff0c;以下是每个项目模板的详细描述和适用场景&#xff1a; Qt Widgets…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023