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)。

You’ve successfully subscribed to Skyward
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.