当前内容所在位置
- 第一章 层叠、优先级与继承
- 第二章 相对单位
- 2.1 相对单位的威力
- 2.2 em 与 rem
- 2.3 告别像素思维
- 2.4 视口的相对单位
- 2.5 无单位的数值与行高 ✔️
- 2.6 自定义属性
- 2.7 本章小结
2.5 无单位的数值与行高
有些属性允许使用无单位的数值(unitless values,即没有指定单位的数字)。支持无单位值的属性(properties)包括 line-height
、z-index
和 font-weight
(700 相当于 bold
粗体字;400 相当于 normal
常规大小等等);此外,还可以在任何设置长度单位(如 px
、em
或 rem
)的地方使用无单位数值 0
,因为在这些情况下单位并不重要------0px
、0%
、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
。由于字号为 32px
(2em × 16px
,浏览器默认值),因此本地计算的行高为 38.4px
(32px × 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 */
}
这些效果是由于继承的一个怪异特性所造成的:当一个元素的值是用长度(px
、em
、rem
等)定义时,其 计算值 会被子元素继承。当使用 em
等相对单位设置行高时,它们的具体大小会被先计算出来,然后再将该计算值继承给子元素。对于行高 line-height
属性,如果子元素的字号与该计算值对应的字号不一致,就会导致像文字重叠这样意想不到的结果。
而当使用的是无单位数值时,被继承的是该声明值,也就是说其计算值将在每个继承的子元素中重新计算。这样得出的结果几乎总是我们所希望的。我们可以用一个无单位的数值给 body
设置行高,之后就不用修改了,除非个别地方需要其他不一样的行高。