重修 CSS（二）：相对单位

今天的内容来自书中第一部分《基础回顾》的第二章《相对单位》。

绝对单位 px 和它的朋友们

CSS 中的绝对单位主要是像素 px，此外还有 mm、cm、in、pt、pc。这些单位都是可以相互换算的，其中 1in = 96px。也就是说，px 指的并不是屏幕上的像素，尤其是在 HiDPI 下会被缩放。但是在大多数情况下，96px 的长度和物理一英寸的大小是差不多的。

相对单位 em 和 rem

em 是最常见的相对单位，它指的是当前元素的字号的大小。通过使用 em，我们可以使用字号来控制整个元素的大小。唯一的例外是 font-size 属性，即字号本身。当我们说 font-size: 1.2em 的时候，指的是将当前元素的字号设为继承值的 1.2 倍；计算完当前元素的绝对字号后，才用字号的计算值来计算其他属性的值。

在 HTML 中，某些嵌套的元素（例如 <ul>）会改变字体的大小，此时每一层的字号都是上一层的 0.8 倍。在这种情况下，1em 的大小也会随之改变。此时 rem 就能派上用场。rem 即 root em，指是 root 元素（而不是父元素）的字号，一般即 html 的字号。我们可以给 :root 伪类定义字号 font-size: 1em，然后给 ul 定义 font-size: .8rem。这样所有 ul 的字号都将是默认字号的 0.8 倍，不会再缩小了。

一般来说，我们用 rem 设置字号，px 设置边框，em 设置其他大部分属性（比如 margin、padding、圆角等）。

视口相对单位

除了相对于字号的单位，还有相对于视口（viewport）大小的单位。vh 和 vw 分别指的是视口高和宽的 1/100 的大小，vmin 和 vmax 分别指的是视口高宽较小值和较大值的 1/100 的大小。

这种单位比较少见，而且比较新。一种用途是用于填满屏幕的大图。此外还可以用来设置字号，例如 font-size: calc(0.5em + 1vw)。这样设置字号可以让字体随窗口大小缩放，而又不至于过小。

无单位的数值和 line-height

一些属性支持无单位的数值。任何长度单位都可以使用无单位的值 0（但不能用于角度、时间等值）。

line-height 比较特殊，它可以有单位也可以无单位。当无单位时，它的子元素将继承它的相对值，即每个子元素的 line-height 都会重新计算计算值；而有单位（如 em）时，子元素将继承它的计算值，这通常都会导致问题。

自定义属性（即 CSS 变量）

自定义属性由 -- 开头，剩余部分可以随意命名。当我们定义了一个自定义属性后，就可以用 var() 来获取它的值。比如如果先定义了 --main-font: Helvetica, Arial, sans-serif，就可以在子元素中使用 font-family: var(--main-font) 来设定字体。var() 还可以接受第二个参数，作为变量不存在时的缺省值，如 var(--main-font, sans-serif)。

某个元素定义变量后，它的子元素可以重新定义并覆盖这些变量的值。

有（I）些（E）浏览器还不支持 var()。此时可以像下面的代码块中那样提供一个缺省值，但是这并不是万能的。

some-element {
  color: black;
  color: var(--main-color);
}

未完待续

下一篇笔记将会讨论 CSS 的核心之一：盒模型（box model）。