共计 1989 个字符，预计需要花费 5 分钟才能阅读完成。
CSS 中有很多属性可以接受长度值，比如：width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多，因此 CSS 也提供了许多长度单位。有的是日常生活中使用的单位，比如：厘米（cm）和英寸（in）；有的是印刷行业使用的单位，比如：point（pt）和 pica（pc）；有的是专门为 CSS 发明的单位，比如：px。
使用场景
那么这些属性和单位怎么配合使用呢？特定的属性需要使用特定的单位吗？其实并非如此，单位和属性无关，同一个属性任何单位都适用，何时使用何种单位是没有限制的，如果属性接受以 px 为单位的值（比如：margin: 5px），那么它也可以接受英寸或厘米（margin: 1.2in; margin: 0.5cm）为单位的值，反之亦然。
单位虽然和属性无关，但是和输出的媒介有一定关系，比如输出到是屏幕还是纸张。在屏幕上显示和在纸张上面打印推荐使用的单位是不一样的。下表给出了推荐的使用方法：
输出媒介
推荐
偶尔使用
不推荐
屏幕
em, px, %
ex
pt, cm, mm, in, pc
打印
em, cm, mm, in, pt, pc, %
px, ex
除了和输出媒介的关系，这些单位可以从长度值的计算方式区分为绝对单位和相对单位。
绝对单位
绝对单位（px，cm，mm，in，Q，pt 和 pc）意味着以此为单位的长度值与其代表的物理长度相等，比如 width: 1cm 即与现实世界中的 1cm 长度相等，也意味着绝对单位在所有的媒介上的显示效果是一致的。但这是理想情况，受显示器和不同浏览器 CSS 实现的差异，在很多设备上绝对单位显示的并不精确。因为 px 和 in 的关系为 1in=96px，在低分辨率设备上，1px 为 1 像素（pixel，也是 px 名称的由来）长度，而低分辨率的屏幕上 1px 往往大于 1 /96in，所以从 px 计算得到的其他绝对单位值都不准确。而在高分辨率设备上（如现在的高清屏和打印机）绝对单位显示得更精确。由于以上原因，绝对单位更多的是在打印时使用。
曾经，CSS 要求在计算机屏幕上正确显示绝对单位。但是由于大部分厂商并不能实现这一要求，所以 CSS 在 2011 年放弃了这一要求。目前，绝对单位仅在打印和高分辨率设备上正常工作。CSS 没有明确定义“高分辨率”的含义。但是，由于目前低端打印机的每英寸点数为 300 dpi，而高端屏幕的每英寸点数为 200 dpi，因此所谓的“高分辨率”可能介于两者之间。。
下面贴出绝对单位直接的换算公式：
1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px
px
作为 CSS 中最常用的单位，关于 px 还是有必要多说两句的。px 的特点可以归纳如下：
在低分辨率设备上，1px = 1 像素；
在高分辨率设备上，1px = 1/96in，1px 不一定等于 1 像素（比如 4.7 英寸的 iphone 上 1px= 2 像素）；
对于图片显示，1px = 1 图片像素，比如：一个 600×400 分辨率的照片的的 CSS 宽高即为 600px 和 400px（在 4.7 英寸 iphone 上要用 1200×800 个像素点显示）；
相对单位
相对单位意味着长度值是根据其他长度计算得出的。相对单位又可以分为基于字体（font based）和基于视窗（viewport based）的：
Font Based
em, ex
首先说说 em 和 ex，em 代表元素的当前字体大小，如果元素的 font-size 为 2cm，那么 1em 即表示 2cm。em 可以用于控制尺寸，比如 margin: 1em; text-indent:1.5em，此时这些尺寸和元素字体大小相关，因此在大屏幕上（字体尺寸较大）和小屏幕上（字体尺寸较小）会等比缩放，因此 em 可以用于响应式的设计。如果 em 直接用于 font-size 属性，如 font-size: 2em，则 em 表示为父元素字体的大小。
ex 很少被使用，ex 表现的大小与字体的 x -height 相关。x-height 大致等于字体中小写字母（例如 a，c，m 或 o）的高度。相同 font-size 的不同字体的 x -height 可能会有很大的差别，所以使用 ex 产生的效果存在很大的不确定性。
rem
CSS 在 2013 年创造出了一个新的单位 rem，rem 表示的是根元素（html 元素的）字体大小，在每个元素里面 em 都可能不一样，但是 rem 都是一致的。因为这一特性，rem 现在被更广泛的应用于响应式设计。
ch
ch 用的表较少，是 CSS3 中新加入的单位，表示当前字体中的 “0” (零、unicode 字符 U+0030) 的宽度。
Viewport Based
vw，wh，vmin，vmax
都是 CSS3 中新加入的单位。vw，vh 可以根据视窗大小调整字体大小。vw 是视窗的 1 /100 的宽度，而 vh 是视窗 1 /100 的高度。此外还有 vmin，它指的是 vw 以及 vh 间较小的那个，与之相对的还有 vmax。这些单位在目前大部分浏览器上都有支持。
