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

有几种 CSS 值？

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

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

绝对单位与相对单位

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

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

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

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