自己造网站,温州网站建设联系电话,外贸网站制作需求,政务大厅网站建设管理制度当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 ✔️ 12.1.1 使用 em 还是 px ✔️12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 文章目录 第 12 章 排版与间距… 当前内容所在位置可进入专栏查看其他译好的章节内容 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 ✔️ 12.1.1 使用 em 还是 px ✔️12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 文章目录 第 12 章 排版与间距 Typography and spacing12.1 间距 Spacing12.1.1 使用 em 还是 pxUsing ems vs. px 《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 还是 pxUsing ems vs. px
考虑使用相对单位还是绝对单位是非常重要的决定。因为设计师一般使用像素来标注距离因此使用绝对单位会相对容易。但启用相对单位无论是选 em 还是 rem都可以带来很多好处。
我们来看一下导航菜单里标注的距离如图 12.1 所示。设计稿要求每个导航菜单项之间必须留有 10px 的间距同时其底边与导航条的底边之间的间距也为 10px。 【图 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 classnav-containerdiv classnav-container__innera classhome-link href/Ink/aul classtop-navlia href/featuresFeatures/a/lilia href/pricingPricing/a/lilia href/supportSupport/a/lili classtop-nav__featureda href/loginLogin/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 所示设计稿展示了这些间距的测量结果。可以看到无论对于带背景图片的主图元素还是设置了背景色的三个内容栏元素标出的间隔都仅对元素外围生效因此需要使用外边距来处理这两个间隔。 【图 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 与 rem2.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 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介 译注若采用外边距实现起来会比较繁琐。上一版就是用的左外边距需要和猫头鹰选择器搭配使用写作.top-nav li li { margin-left: 0.625em; }。 ↩︎
