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