【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-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 设置行高，之后就不用修改了，除非个别地方需要其他不一样的行高。