【CSS in Depth 2精译】2.5 无单位的数值与行高

当前内容所在位置

  • 第一章 层叠、优先级与继承
  • 第二章 相对单位
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高 ✔️
    • 2.6 自定义属性
    • 2.7 本章小结

2.5 无单位的数值与行高

有些属性允许使用无单位的数值(unitless values,即没有指定单位的数字)。支持无单位值的属性(properties)包括 line-heightz-indexfont-weight(700 相当于 bold 粗体字;400 相当于 normal 常规大小等等);此外,还可以在任何设置长度单位(如 pxemrem)的地方使用无单位数值 0,因为在这些情况下单位并不重要------0px0%0em 均等效。

警告

无单位的 0 只能用于长度值和百分比,例如内边距(paddings)、边框(borders)和宽度(widths);0 不可用于角度值,例如度,或者与时间相关的值,例如秒。

line-height 属性比较特殊,其属性值既可以是带单位的值,也可以不带单位。通常应该使用无单位的值,因为二者的继承方式有所不同。让我们在页面中输入文字,看看不带单位的行高是什么效果。按如下代码更新页面:

代码清单 2.15 继承 line-height 的 HTML

html 复制代码
<body>
  <p class="about-us">
    We have built partnerships with small farms around the world to
    hand-select beans at the peak of season. We then carefully roast in
    small batches to maximize their potential.
  </p>
</body>

接下来给 body 正文元素指定行高,并让页面其他元素继承该行高。可以看到,无论怎么调整页面字号,行高都会正常显示(如图 2.12 所示):


图 2.12 图 为每个后代元素重新计算无单位的行高,往往会产生间距适中的文本行

按代码清单 2.16 更新样式表。该段落的行高为继承过来的 1.2。由于字号为 32px2em × 16px,浏览器默认值),因此本地计算的行高为 38.4px32px × 1.2)。这将在行与行之间留出适当的空间。

代码清单 2.16 无单位的数值定义的行高

css 复制代码
body {
  line-height: 1.2;  /* 后代元素继承了无单位的值 */
}
.about-us {
  font-size: 2em;
}

如果用带单位的值来设置行高,则可能产生意想不到的结果,如图 2.13 所示,每行文字会相互重叠。代码清单 2.17 为对应的 CSS 样式。


图 2.13 使用带单位的行高在继承给子元素时间距可能达不到预期

代码清单 2.17 用带单位的值定义行高,产生了意想不到的结果

css 复制代码
body {
  line-height: 1.2em; /* 后代元素继承了计算值(19.2px) */
}
.about-us {
  font-size: 2em; /* 计算值为 32px */
}

这些效果是由于继承的一个怪异特性所造成的:当一个元素的值是用长度(pxemrem 等)定义时,其 计算值 会被子元素继承。当使用 em 等相对单位设置行高时,它们的具体大小会被先计算出来,然后再将该计算值继承给子元素。对于行高 line-height 属性,如果子元素的字号与该计算值对应的字号不一致,就会导致像文字重叠这样意想不到的结果。

而当使用的是无单位数值时,被继承的是该声明值,也就是说其计算值将在每个继承的子元素中重新计算。这样得出的结果几乎总是我们所希望的。我们可以用一个无单位的数值给 body 设置行高,之后就不用修改了,除非个别地方需要其他不一样的行高。

相关推荐
齐 飞4 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹21 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习