【CSS in Depth 2 精译_074】第 12 章 CSS 排版与间距概述 + 12.1 间距设置（下）：行内元素的间距设置
当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第四部分 视觉增强技术 ✔️
- 【第 12 章 CSS 排版与间距】 ✔️
- 12.1 间距设置
- 12.1.1 使用 em 还是 px
- 12.1.2 对行高的深入思考
- 12.1.3 行内元素的间距设置 ✔️
- 12.2 Web 字体
- 12.3 谷歌字体
《CSS in Depth》新版封面
译者按
都说细节决定成败，这一点在 CSS 的页面实现中体现得淋漓尽致。见过太多的前端开发，明明用简单的 CSS 就能实现的效果，却剑走偏锋写了一堆 JavaScript 脚本。这种感觉就像医生看病一样，医术的高低不在于用了多少名贵药材，而在于能否对症下药。缝缝补补给自己挖坑也就算了，关键还害苦了后面接手的兄弟。好的 CSS 设计一定是用心迭代的结果，而细节处理的好坏又决定了迭代的次数与每次迭代的质量。
12.1.3 行内元素的间距设置 Spacing inline elements
设计稿中还有最后一处细节样式需要微调，即中间的内容栏展示的操作系统列表区域。示例应用 Ink 可以在这些操作系统中使用（如图 12.6 所示）。之前将每个列表项放到了一个无序列表元素（<ul>）中，现在需要根据设计稿的要求将它们排成一行。
【图 12.6 列表项需要微调样式并在一行内展示】
这种微型布局的设计在一些标签类的内容展示上十分常见，例如博客文章的标签列表或商品类别等。本例之所以采用这样的设计方案，旨在带您了解几个您应该比较熟悉且感兴趣的小问题（quirks）。
这种布局有多种实现方案，Flexbox 弹性盒布局和行内元素是两种比较容易想到的。本书之前的章节已经介绍了不少有关 Flexbox 布局的知识，因此这里就重点考察一下采用行内元素时需要考虑哪些问题。
如果采用行内元素来实现上述效果，应该很容易想到一些样式。例如每个元素项都需要声明 display: inline；各元素还需要设置一些内边距、背景色、圆角边框等等。一开始可能感觉只要有这些样式就够了，可一旦内容中出现换行的情况，问题便接踵而至：当视口宽度为某个固定值，或者后续列表项发生了变化，就可能会发生如图 12.7 所示的情况：
【图 12.7 多个列表项在换行时出现了重叠的情况】
每一行列表项的灰色背景会和另一行的列表项重叠，原因就在于行高。前面讲过，文本行的高度是由 字号 乘以 行高 决定的。如果为行内元素添加内边距，元素本身虽然也会变高，但不会增加文本行的高度。文本行的高度完全由行高决定。
要解决这个问题，就需要增加每个列表项的行高。代码清单 12.5 给出了标签列表模块对应的 CSS 代码。将它们同步更新到 modules 模块图层对应的样式表中。也可以尝试不同的行高，看看会产生什么样的效果。
译注
为方便对照，这里直接给出正文栏中间那栏的 HTML 标记：
<div class="tile"> <h4>Take it with you</h4> <p> Ink is available on a wide array of devices, so you can work from anywhere: </p> <ul class="tag-list"> <li>Web</li> <li>iOS</li> <li>Android</li> <li>Windows Phone</li> </ul> <a href="/supported-devices" class="button">Read more</a> </div>
代码清单 12.5 为标签添加样式
@layer modules {
.tag-list {
/* 覆盖用户代理默认的列表样式 */
list-style: none;
padding-inline-start: unset;
}
.tag-list > li {
display: inline;
padding: 0.3rem 0.5rem;
font-size: 0.8rem;
border-radius: 0.2rem;
background-color: var(--light-gray);
line-height: 2.6; /* 设置一个较大的行高，以便在换行时有足够的垂直空间 */
}
}
值得一提的是，只有行内元素才具有这样的行为模式。如果一个元素是弹性子元素（或 inline-block，即行内块级元素），为了容纳它，其所在的行也会随之增高。当然页面仍需设置水平和垂直外边距来增加子元素间的间隔。借助行内元素的相关特性，就能通过元素间的天然空白来产生想要的间距。
注意
请注意页面中 “Windows Phone” 字样的子元素，它是可以换行的。如果换成弹性盒子或者行内块（inline block）中，则不允许像这样换行，整个元素都将换到下一行显示。如果不允许出现这样的情况，则需要根据实际情况选择最适合您的方式来解决这个问题。
这样我们就根据上一章给出的设计稿完成了整个页面的实现。本地页面的最终效果应该和图 12.8 中展示的视觉稿效果完全一致。
【图 12.8 完成页面设计后的效果】
我们花了很多时间来分析这些样式细节。很多开发者在实现页面设计时往往不太在意这些细节，但对于那些关注了细节的开发者来说，做到就相当于赚到。往往也正是这些细节道出了普通与优秀之间的本质差别。
在开发 CSS 样式时，建议大家多花些时间来完善设计细节。即便您做得没有设计师那么专业，也要相信自己的眼光。试着在这里多预留些空间，或者在那里少留一点，看看哪种效果更好。要舍得花时间来调试，但千万别滥用页面颜色，而是有选择地将颜色放在最需要吸引用户注意的位置。要创建一致的模式，然后打破这些规律的模式，这样才能将用户的注意力吸引到页面最重要的内容上。
译注
间距的微调就暂告一个段落了。下一节将介绍排版相关的知识，看看 CSS 近年来在字体方面都有哪些最新进展。
关于《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 本章小结
- 第十章 CSS 容器查询
- 10.1 容器查询的一个简单示例
- 10.1.1 容器尺寸查询的用法
- 10.2 深入理解容器
- 10.2.1 容器的类型
- 10.2.2 容器的名称
- 10.2.3 容器与模块化 CSS
- 10.3 与容器相关的单位
- 10.4 容器样式查询的用法
- 10.4.1 将模块与所在容器解耦
- 10.4.2 减少重复代码
- 10.5 本章小结
- 第 11 章 颜色与对比
- 11.1 通过对比进行交流
- 11.1.1 模式的建立
- 11.1.2 还原设计稿
- 11.2 颜色的定义
- 11.2.1 色域与色彩空间
- 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
- 11.3 利用 OKLCH 处理颜色（上篇）
- 11.3.4 从页面其他颜色衍生出新颜色（下篇）
- 11.4 思考字体颜色的对比效果
- 11.5 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介
原文地址：https://blog.csdn.net/frgod/article/details/144385464
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！