CSS 的值和单位是 CSS 另一个独立功能模块，到目前为止，该模块已到了 Level 4 阶段（CSS Values and Units Module Level 4）。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说，对于 CSS 中的值和单位应该不会感到陌生，但大部分同学应该都会把精力集中于单位这一块，事实上也是如此，在这篇文章中，我们所涉及到的大部分内容也是聊单位这一块，对于值这一部分只会花一点点内容略为带过。

CSS 的值

在聊 CSS 的值之前，先给大家上一图：

上图只是我们常见的 CSS 样式规则之一。

事实上 CSS 是一门非常神奇的学科。我们在声明任何一个 CSS 的规则都可能会包括：

• CSS 的选择器
• CSS 的属性
• CSS 的属性值
• CSS 的属性值单位

而我们今天要聊的是 CSS 的属性值和单位。但事实上，CSS 不是每个规则都会同时包含 CSS 的属性值和单位，因为很多属性的值是只具有值，不具有单位的。比如上图的color属性，他的值就不带单位，但可以是关键词、字符串、函数等。你在写 CSS 的时候可能会涉及到的 CSS 的值会有：

• 数值：长度值<length>，用于指定例如元素width、border-width、font-size等属性的值，这些值可能带有单位，也可能不带任何单位
• 百分比：可以用于指定尺寸或长度，例如取决于父容器的width、height或默认的font-size
• 颜色：用于指定background-color、color等
• 坐标位置：以屏幕的左上角为坐标原点定位元素的位置，比如常见的background-position、top、right、bottom和left等属性
• 函数：用于指定背景图片或背景图片的渐变，比如linear-gradient()、image-set()等

简单的概括一下：CSS 属性的值有多种，可以是数值、字符串、关键词或函数；同时 CSS 的属性的值可以带单位也可以不带单位。而且 CSS 的值并不是一尘不变的，不同的属性对应的值都会略有不同，比如：width属性，它的值可以是一个百分比的值，也可以是一个带有数值和单位；color的值可以是一个关键词，也可以是一个函数值；font-size可以是百分比、关键词，带有单位的数值；line-height可以只是一个数值，可以是百分比值，还可以是带有单位的数值等。众多属性不一一列举。

CSS 的单位

上面也提到了，CSS 属性值是带有单位，也有不带单位的。而 CSS 的单位对于 CSS 的值有是一个直接影响的。因为 CSS 的单位直接对 CSS 的值的计算是有直接影响的，在 CSS 中单位的之间有一个关系图，如下所示：

为了便于大家更好的理解和记住 CSS 中单位相关的知识点，下图是根据 W3C 规范重新做的划分：

那么在这篇文章中，我们主要围绕着 CSS 中常用单位来展开。介绍这些 CSS 单位使用的场景和使用细节。

绝对单位

在 CSS 中有些单位是绝对值，不受任何屏幕大小或字体的影响。这些单位的显示可能会根据不同的屏幕分辨率而有所不同，因为它们取决于屏幕的 DPI（每英寸上的点数）。绝对单位常用于一些物理测量上。在环境输出已知的情形下非常有用。在 CSS 中，绝对单位包括：px、in、cm、mm、pc和pt等。其中px是我们最为常见的一个绝对单位。到目前为止，px在 CSS 的使用中也可以算是主流单位之一。

像素单位被认为是许多其他单位的测量基础。它提供了各种设备中一致的结果。也被认为是最好的设备像素，而这种像素长度和你在显示器上看到的文字屏幕像素元关。因为px实际上是一个按角度度量的单位，即像素角度。

很多时候，px也常被称为 CSS 像素。它是一个绝对单位，但也可以被视为相对单位，为什么这么说呢？那是因为像素单位相对的是设备像素。在同一样的设备上，每1个 CSS 像素所代表的物理像素是可以变化的（即 CSS 像素的第一方面的相对性）；在不同的设备之间，每1个 CSS 像素所代表的物理像素是可以变化的（即 CSS 像素的第二方面的相对性）。

根据维基百科的解释：

它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！

不同的设备，图像基本采样的单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别被称为PPI和DPI`。

由于不同的物理设备的物理像素的大小是不一样的，所以 CSS 认为浏览器应该对 CSS 中的像素进行调节，使得浏览器中1个 CSS 像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而 CSS 规范中使用"参考像素"来进行换算。

1个参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并不是 1/96 英寸长度，而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位（即1/96英寸）时视线与水平线的夹角。通常认为常人臂长为28英寸，所以它的视角是:

(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

由于 CSS 像素是一个视角单位，所以在真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取 CSS 像素。

简单介绍一下一臂之遥：我们在使用不同设备输出时，眼睛与设备输出的典型距离是不同的。比如电脑显示器，通常是一臂之距，而看书和纸张时（对应于打印机的设备输出），则通常会更近一些。看电视时则会更远，比如一般建议是电视机屏幕对角线的2.5到3倍长 —— 如果你是个42英寸彩电，那就差不多是3米远。

这样描述对于很多 CSSer 太过于理论，我们还是回到实际中了。比如说我在项目中有一个盒子元素，它的大小是宽高都是150px，那么我们在 CSS 中常常这么使用：

.box {
    width: 150px;
    height: 150px;
}

虽然说，像素应该是设备和显示器中显示趋于一致，但是他越来越不正确。那是因为，随站 Retina 屏的出现，dpr不同（设备像素比），对像素和显示器显示会略有不同。比如下图所示：

正因如此，在移动端设计当中，大部分设计都采用2倍或3倍尺寸进行设计。

虽然说px是 CSS 最绝对单位中最常见，使用最频繁的一个单位。而事实上，CSS 中绝对单位不仅仅这一个，还有其他的绝对单位，比如in（英寸）、cm（厘米）、mm（毫米）、pc和pt等。其中，in、cm和mm可以和px直接进行换算：

• 1in = 96px
• 1cm = 37.8px
• 1mm = 3.78px

而pc和pt和in有直接关系：

• 1in = 72pt
• 1in = 6pc

如果你希望pt和pc直接和px进行换算的话，可以借助in为中间桥梁。比如：

• 1in = 96px = 72pt，那么1px = 72 / 96 = 0.75pt
• 1in = 96px = 6pc，那么1px = 6 / 96 = 0.0625pc

可以用一张简单的图来描述绝对单位之间的关系：

在规范中，绝对单位还有一个新单位，不怎么常见，即Q，1Q相当于25mm。它被用于印刷排版。

相对单位

相对单位和绝对单位有所不同，相对单位是相对于另一个长度的长度。使用相对单元的样式更容易离开一个输出环境并适应另一个环境。CSS 的相对单位主要分为两大类，其一是字体相对单位，会根据font-size进行计算；其二是视窗相对单位，相对于视窗大小来决定。

字体相对单位

字体相对单位主要有em、rem、ex、ch、cap、ic、lh和rlh。其中em、rem、ex和ch是较为常见的字体相对单位。在这里我们也只会介绍这几个常见的单位。

em

起初排版度量时是基于当天字体大写字母M的尺寸的。当改变font-family时，它的尺寸不会发生任何改变，但是在改变font-size的大小时，它的尺寸就会发生变化。

在 CSS 中，如果没有任何 CSS 规则影响的前提之下，1em的长度是：

1em = 16px = 0.17in = 12pt = 1pc = 4.mm = 0.42cm

众所周知，每个浏览器都有一个默认的font-size大小，而这个值通常是16px（用户未修改浏览器字号时）。这也就是为什么1em = 16px的原理所在。

em还有一点很重要：em和它们的祖先元素的font-size有关系。因此，如果祖先元素的font-size设置为0.5em