【CSS in Depth 2 精译_072】第 12 章 CSS 排版与间距概述 + 12.1 间距设置
当前内容所在位置（可进入专栏查察其他译好的章节内容）[*]第四部分 视觉增强技术 ✔️
[*]【第 12 章 CSS 排版与间距】 ✔️
[*]12.1 间距设置 ✔️
[*]12.1.1 使用 em 还是 px ✔️
[*]12.1.2 对行高的深入思考
[*]12.1.3 行内元素的间距设置
https://i-blog.csdnimg.cn/direct/04adbd9682e345888d7bdf584b0990c6.png#pic_center
《CSS in Depth》新版封面
译者按
本篇又将开启新一章的学习，全新修订的第 12 章同样将站在设计师的角度，重点关注页面样式的精修与微调。自学第一版时这些章节我都是能跳过便跳过，因为工作上催得太紧了，很多知识点都是边干边查边消化，过后也疏于复盘，结果现在还得老诚实实回来补上这一课。很多事情就是如许，省力在前通常意味着刻苦在后。有些人即便撞了南墙还不死心，估计是知道返工的活最磨人吧，于是拖着拖着就放弃挣扎了。相比之下，我还算比力荣幸的，没有选择躺平。希望你也是。
第 12 章 排版与间距 Typography and spacing
本章概要
[*]元素间距的微调
[*]用 Web 字体打造页面独特观感
[*]谷歌字体 API 的用法
[*]字体间距的调解（字距、行距与行高）
[*]影响 Web 字体性能的因素及优化计谋
[*]可变字体（variable fonts）的用法
本章将继续构建上一章留下的示例页。现在已经界说好了颜色，页面布局也大致预备就绪了。剩下的工作还包罗精修页面元素间的间距，以及改用 Web 字体来增强页面的视觉趣味性等。它们看似是两个不相关的主题，但在某些关键题目上是存在相互作用的。CSS 中含有大量控制布局、间距及字号的属性（properties），因此有须要将它们与某些通用的间距调解方案结合起来进行考察。
排版是与印刷设备同样古老的一种艺术情势，也因此成为本书唯一一个有着数百年发展汗青的古老话题。本书不会重新至尾先容排版的方方面面，而是探讨排版的一些核心要素，并教会您怎样在现代 Web 开发中应用这些知识。
12.1 间距 Spacing
如果上一章您一直紧跟我的节奏在本地同步练习的话，此刻应该已经实现了示例页的颜色配置和大致的布局。示例页的 HTML 标志详见 代码清单 11.1（译注：位于上一章的 11.1.2 小节）；而 CSS 代码则是在后续讲解中逐步完善的，此刻也应该与本章中的示例代码保持一致。如若不然，也可以从示例代码仓库中复制文件 listing-11.08.html（详见 https://github.com/CSSInDepth/css-in-depth-2/blob/main/ch11/listing-11.08.html）。
下面重点关注设计稿中标注的那些精确间距。根据设计师选用的差别工具，间距的微调通常是开发过程中一项较为枯燥的工作。固然现代化的设计工具能有效缓解这个题目，但在后期审查页面时，可能还会与设计师反复沟通调解，明白一些必要修改的地方，大概跟视觉稿不一致的实现。
这部分工作主要涉及元素外边距的精确设置。人们通常是从最容易的地方着手，哪怕后续碰面对进一步调解。这里要考虑的题目主要有两个：一是相对单位的引入与否；二是考虑行高对垂直间距的实际影响。
12.1.1 使用 em 还是 px（Using ems vs. px）
考虑使用相对单位还是绝对单位，是非常重要的决定。因为设计师一般使用像向来标注距离，因此使用绝对单位会相对容易。但启用相对单位，无论是选 em 还是 rem，都可以带来很多利益。
我们来看一下导航菜单里标注的距离（如图 12.1 所示）。设计稿要求每个导航菜单项之间必须留有 10px 的间距，同时其底边与导航条的底边之间的间距也为 10px。
https://i-blog.csdnimg.cn/direct/9318bc37199c411599864af62ed49f9e.png#pic_center
【图 12.1 每个导航菜单项之间及周围都必要空出 10px】
在第二章中，我们了解了使用相对单位的各种利益，因此有须要想清晰对哪些尺寸恰当相对单位，而哪些恰当用像素。是考虑快刀斩乱麻，将全部尺寸都转为 em 大概 rem？还是因地制宜，根据页面每个设计元素的具体环境来决定？如果考虑间距会随着用户设置的差别字号做同步缩放，那么就应该选用相对单位 em 或 rem；否则使用像素单位 px 就完全充足了。基于如许的考虑，在实际开发中，我通常更倾向于对一些偏小的尺寸应用相对单位（em），特别是那些围绕在文字或按钮周围的尺寸；而稍大一些的容器隔断或内部间距受相应式设计的影响没那么敏感，因此保留像素单位 px 即可。
在我带您了解示例页中的间距设置时，我会指出选择某种方式的来由；但请留意，这些意见或观点难免会带有主观色彩，给出的办理方案也可能并非唯一精确的答案。
按照设计规范，导航栏中的间距尺寸必要在菜单项附近留出 10px 的距离（如图 12.1 所示）。由于它们算小尺寸元素，且文字周围还得留些内边距，因此考虑使用相对单位 em 来设置它们的间距。
鉴于基准字号为 16px，可以通过目标尺寸除以基准字号来算出 em 的值，即 10 / 16 = 0.625。因此该间距为 0.625em；再将其放入样式表中，相关样式代码如下列代码清单 12.1 所示。必要变更的地方都标有注释。
译注
为方便对照，这里直接给出示例页的相关 HTML 标志：
<nav class="nav-container">
<div class="nav-container__inner">
<a class="home-link" href="/">Ink</a>
<ul class="top-nav">
<li><a href="/features">Features</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/support">Support</a></li>
<li class="top-nav__featured"><a href="/login">Login</a></li>
</ul>
</div>
</nav>
代码清单 12.1 使用内边距和外边距来设置导航菜单的间距
.nav-container {
background-color: var(--medium-green);
}
.nav-container__inner {
display: flex;
justify-content: space-between;
max-inline-size: 1080px;
margin-inline: auto;
padding: 0.625em 0; /* 给整个导航栏设置 10px 的上下内边距 */
}
/* ... */
.top-nav {
display: flex;
list-style-type: none;
margin: unset; /* 移除浏览器默认的列表元素外边距样式 */
gap: 0.625em; /* 各导航菜单项间添加 10px 的水平外边距*/
}
处置惩罚间距时，必要知道什么时候该用内边距，什么时候该用外边距。在本例中，容器 nav-container__inner 应该使用内边距来设置垂直隔断，以便对整个容器见效，让其中靠左表现的页面标题（即 a.home-link 元素）和 top-nav 列表自带上下间距；而导航菜单项之间的水平间距则用到了 Flexbox 布局中的间隙（gap），因为我只希望间距出现在各子项之间。别的，也可以通过设置外边距来达到相同结果 1。
再来看看巨幅主图的底边和三个内容栏之间的垂直隔断。如图 12.2 所示，设计稿展示了这些间距的测量结果。可以看到，无论对于带背景图片的主图元素还是设置了背景色的三个内容栏元素，标出的隔断都仅对元素外围见效，因此必要使用外边距来处置惩罚这两个隔断。
https://i-blog.csdnimg.cn/direct/0a16b3da61cf451b9abc981043ea0ea8.png#pic_center
【图 12.2 主图下方（40px）及内容栏（25px）之间的页面外边距结果】
在本例中，我认为这些隔断无需随字号大小而同步缩放，因此就保留了像素单位 px。具体设置详见代码清单 12.2。上一章实在已经设置了主图下方的外边距 40px，这里再写一遍以夸大其用意。将下列示例代码中 tile-row 元素的间隙设置（即 gap 声明）也添加到本地样式表：
代码清单 12.2 为主图下方及内容栏之间设置外边距
.hero {
background: url(collaboration.jpg) no-repeat;
background-size: cover;
margin-block-end: 40px; /* 确保主图下方有 40px 的间距 */
}
/* ... */
.tile-row {
display: flex;
gap: 25px; /* 各分栏之间保持 25px 的间距*/
}
.tile-row > * {
flex: 1;
}
像这种容器（带有背景图片大概背景颜色的），它们之间的隔断设置通常很简朴。如果必要调解文本行之间的间距，例如段落大概标题中的文本，可能会略显麻烦（a little more finicky）。
关于《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 预处置惩罚器简介
[*]译注：若采用外边距实现起来会比力繁琐。上一版就是用的左外边距，必要和猫头鹰选择器搭配使用，写作：.top-nav > li + li { margin-left: 0.625em; }。 ↩︎
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]