CSS 的值与单位的常见知识点

在刚刚开始学习 CSS 的时候,我曾经对值(value)与单位(unit)的相关知识有过一些误解,在使用时也走过一些弯路。今天,我参考 MDN 回顾了一下自己曾经遇到过的一些有趣的知识点,将其记录在这里,也许也能对初学者有一些帮助。

有几种 CSS 值?

就像学习编程语言时,我们总要了解有哪些基元变量类型一样,CSS 的值有哪些类型也是很需要了解的。所有 CSS 值的类型一共有 5 种,分别是:

  • 数值: 长度值,用于指定例如元素宽度、边框(border)宽度或字体大小;以及无单位整数。用于指定例如相对线宽或运行动画的次数。
  • 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度,或默认的字体大小。
  • 颜色: 用于指定背景颜色,字体颜色等。
  • 坐标位置: 例如,以屏幕的左上角为坐标原点定位元素的位置。
  • 函数: 例如,用于指定背景图片或背景图片渐变。

绝对单位与相对单位

像素(px)可能是我们最常使用的单位了,但实际上,这是一个绝对的单位,换句话说,不管其他元素的大小、浏览器窗口的大小如何变化,像素指定的值都是不会变的,在同一个屏幕上永远是一样的长度。除了像素之外,其他的绝对单位还有毫米(mm)、厘米(cm)、英寸(in)、点(pt)(也就是 1/72 英寸)、十二点活字(pc)(顾名思义,就是 12 点的大小),不过这些单位可能我们一辈子都不一定会见到几次。

在桌面网页的开发时代,大家往往不太注意相对单位的问题,在那个时候网页的大小往往都是固定的,做个「自适应」就是高标准了。甚至很多网页都专门在页脚的地方注明了「适合分辨率 1024*768」之类的字样,提示用户如果不在这个分辨率下浏览网页,网页的排版就可能会错位。事实上,这正是绝对单位的弊端。不过前端开发日新月异,随着人们需求的提高和移动端网页的出现,现在大家制作的网页一般都是自适应屏幕大小的了。实现自适应的方法就是采用相对单位,这个在移动端网页开发上尤其明显。

相对单位是相对什么的?我们这里不提百分比,那个已经很直观了。一般来说,相对单位要么相对于当前元素的字号(font-size)要么相对于当前浏览器的视口(viewport)尺寸。具体如下:

  • em:1em 与当前元素的字体大小相同(更具体地说,一个大写字母 M 的宽度)。CSS 样式被应用之前,浏览器给网页设置的默认基础字体大小是 16 像素,这意味着对一个元素来说 1em 的计算值默认为 16 像素。但是要小心—em 单位是会继承父元素的字体大小,所以如果在父元素上设置了不同的字体大小,em 的像素值就会变得复杂。现在不要过于担心这个问题,我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em 是 Web 开发中最常用的相对单位
  • exch: 分别是小写 x 的高度和数字 0 的宽度。这些并不像 em 那样被普遍使用或很好地被支持。
  • rem: REM(root em)和 em 以同样的方式工作,但它总是等于默认基础字体大小的尺寸;继承的字体大小将不起作用,所以这听起来像一个比 em 更好的选择,虽然在旧版本的 IE 上不被支持。
  • vwvh: 分别是视口宽度的 1/100 和视口高度的 1/100,其次,它不像 rem 那样被广泛支持。
  • vmiminvmax: 实际上和 vw 与 vh 类似,只不过 vmin 指的是 vw 和 vh 二者中较小的那个值,vmax 指的是 vw 和 vh 二者中较大的那个值。

在移动端开发上,为了保持元素的大小与布局随屏幕大小而改变,始终正常不错位,往往会采用 rem 单位或者 vw 单位布局。类似的技巧有时也会被应用到桌面网页的开发上。

0 没有单位

有时候我们需要给一些值设定为 0,比如 padding、margin 之类的属性。这时,如果写成「0 px」或「0 rem」等值的话,实际上是错误的。因为 0 是 CSS 中一个没有单位的值,不管是颜色还是数值还是坐标,只要直接设定成 0 就可以了。

行高也可以没有单位

在网页上排版文章时,如果用到 line-height,我们往往不会直接给它的值设定一个具体的单位,而是简单的写一个数字,表示需要设定为元素字体(font-size)的几倍。例如 line-height: 2; 的含义就是将行高设定为字体的两倍,这样可以更加省力。

百分比

在自适应布局时,百分比赋值是必须用到的。常见的百分比用法只有 4 种:

  • 设定宽度、横轴相关属性时,百分比指的是父容器宽度的百分比。
  • 设定高度、纵轴相关属性时,百分比指的是父容器高度的百分比。
  • 设定字体、行高相关属性时,百分比指的是元素字体大小(font-size)的百分比。
  • 设定内、外边距时,百分比指的是父容器宽度的百分比,这个往往作为固定元素宽高比例的技巧。

颜色

在设定颜色时,我们有两种方式,一种是直接设定十六进制的数字(HEX),另一种是借助颜色函数。比如,我们要设定白色,那么用十六进制数字表示就是 #FFFFFF,也可以简写为 #FFF,写成小写 #ffffff 或 #fff 也没有问题。如果用 RGB 颜色函数表示,就是 rgb(255, 255, 255)。RGB 颜色函数和十六进制值数字是位置对应的关系,如 #FF0000 和 rgb(255, 0, 0) 就是等价的。

如果要给颜色加上一个透明度,也就是 PhotoShop 里常见的那个 alpha 通道,那么常用的是 rgba 函数,例如 rgba(255, 255, 255, 0.5) 或者 rgba(255, 255, 255, 50%) 就代表透明度为 0.5 的白色。当然,用十六进制数字也可以表示透明度,仍然和 rgba 函数的参数是位置对应的关系,如 #FFFFFF80 和 rgba(255, 255, 255, 0.5) 就是一样的的,只不过这个用 HEX 写法表示 alpha 通道的新特性老版本浏览器是不支持的。

除了 rgb 颜色,CSS 也支持用 hsl 和 hsla 函数设置颜色,不过不太常用。hsl()函数接受三个表示色调饱和度以及明度的参数,使用与上述三种不同的方式来区分大约 1670 万种颜色;hsla()函数多了一个第四个参数,表示透明度。

函数

前面已经提到了一种函数——颜色函数。事实上,在 CSS 中还有许多其他函数,常用的有 transform 中用到的 translate() 函数rotate() 函数matrix() 函数scale() 函数skew() 函数,设置长宽时用到的 calc() 函数,加载背景图像时用到的 url() 函数等等,详细的使用方法可以在 MDN 上查看。

2 thoughts on “CSS 的值与单位的常见知识点

发表评论

电子邮件地址不会被公开。 必填项已用*标注