Beyond awesome | 越而胜己

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

绝对单位 px 和它的朋友们

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

相对单位 emrem

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

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

一般来说,我们用 rem 设置字号,px 设置边框,em 设置其他大部分属性(比如 marginpadding、圆角等)。

视口相对单位

除了相对于字号的单位,还有相对于视口(viewport)大小的单位。vhvw 分别指的是视口高和宽的 1/100 的大小,vminvmax 分别指的是视口高宽较小值和较大值的 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)。