IT评测·应用市场-qidao123.com技术社区

标题: 【CSS in Depth 2 精译_072】第 12 章 CSS 排版与间距概述 + 12.1 间距设置 [打印本页]

作者: 风雨同行    时间: 2024-12-10 13:30
标题: 【CSS in Depth 2 精译_072】第 12 章 CSS 排版与间距概述 + 12.1 间距设置
当前内容所在位置(可进入专栏查察其他译好的章节内容)
  
  
  

《CSS in Depth》新版封面

   译者按
本篇又将开启新一章的学习,全新修订的第 12 章同样将站在设计师的角度,重点关注页面样式的精修与微调。自学第一版时这些章节我都是能跳过便跳过,因为工作上催得太紧了,很多知识点都是边干边查边消化,过后也疏于复盘,结果现在还得老诚实实回来补上这一课。很多事情就是如许,省力在前通常意味着刻苦在后。有些人即便撞了南墙还不死心,估计是知道返工的活最磨人吧,于是拖着拖着就放弃挣扎了。相比之下,我还算比力荣幸的,没有选择躺平。希望你也是。
  第 12 章 排版与间距 Typography and spacing


   本章概要
  
  本章将继续构建上一章留下的示例页。现在已经界说好了颜色,页面布局也大致预备就绪了。剩下的工作还包罗精修页面元素间的间距,以及改用 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。

【图 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 标志:
  1. <nav class="nav-container">
  2.   <div class="nav-container__inner">
  3.     <a class="home-link" href="/">Ink</a>
  4.     <ul class="top-nav">
  5.       <li><a href="/features">Features</a></li>
  6.       <li><a href="/pricing">Pricing</a></li>
  7.       <li><a href="/support">Support</a></li>
  8.       <li class="top-nav__featured"><a href="/login">Login</a></li>
  9.     </ul>
  10.   </div>
  11. </nav>
复制代码
代码清单 12.1 使用内边距和外边距来设置导航菜单的间距
  1. .nav-container {
  2.   background-color: var(--medium-green);
  3. }
  4. .nav-container__inner {
  5.   display: flex;
  6.   justify-content: space-between;
  7.   max-inline-size: 1080px;
  8.   margin-inline: auto;
  9.   padding: 0.625em 0; /* 给整个导航栏设置 10px 的上下内边距 */
  10. }
  11. /* ... */
  12. .top-nav {
  13.   display: flex;
  14.   list-style-type: none;
  15.   margin: unset; /* 移除浏览器默认的列表元素外边距样式 */
  16.   gap: 0.625em; /* 各导航菜单项间添加 10px 的水平外边距*/
  17. }
复制代码
处置惩罚间距时,必要知道什么时候该用内边距,什么时候该用外边距。在本例中,容器 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 为主图下方及内容栏之间设置外边距
  1. .hero {
  2.   background: url(collaboration.jpg) no-repeat;
  3.   background-size: cover;
  4.   margin-block-end: 40px; /* 确保主图下方有 40px 的间距 */
  5. }
  6. /* ... */
  7. .tile-row {
  8.   display: flex;
  9.   gap: 25px; /* 各分栏之间保持 25px 的间距*/
  10. }
  11. .tile-row > * {
  12.   flex: 1;
  13. }
复制代码
像这种容器(带有背景图片大概背景颜色的),它们之间的隔断设置通常很简朴。如果必要调解文本行之间的间距,例如段落大概标题中的文本,可能会略显麻烦(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 版高分译文专栏,全网首发,精译精校,持续更新,计划今年内完玉成书翻译,敬请等待!!!
现在已完结的章节(可进入本专栏查察详情,连载期间完全免费):
   
  
   
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。




欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4