CSS长度单位作为CSS重要属性之一，相信每个前端甚至后端都对它都是对它比较了解的。但是CSS的长度单位有十几种，这其中包括常用的px、rem等常用长度单位，也有着ex、vmin、vmax等不那么常用的长度单位。

我们把长度单位按照绝对长度、字体相对长度、窗口相对长度划分为以下几类：

绝对长度

in 英寸Inches (1 英寸 = 2.54 厘米)

cm：厘米Centimeters

mm：毫米Millimeters

pt：点Points (1点 = 1/72英寸)

pc：皮卡Picas (1 皮卡 = 12 点)

q：1/4毫米（quarter-millimeters）

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

字体相对长度

px像素（Pixel）：表示相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的

em：继承父级元素的字体大小。如当尺寸未被人为设置，则相对于浏览器的默认字体尺寸

rem：表示根元素的字体大小。如当尺寸未被人为设置，则相对于浏览器的默认字体尺寸

ex：ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

%

1. 元素不存在定位： 则基于直接父元素的宽高度

2. 元素存在定位 且 定位为 relative，则也基于直接父元素的宽高度

3. 元素存在定位 且 定位为 absolute，则基于最近的相对定位（relative）的祖先元素的宽高度

4. 元素存在定位 且 定位为 fixed，则始终基于body元素的宽高度

窗口相对长度

ch: 相对于字符0的宽度

vh: 窗口可视范围高度

vw: 窗口可视范围宽度

vmin: 窗口可视范围的宽度或高度中较小的那个尺寸（1vm 和 1vh 较小的一者）

vmax: 窗口可视范围的宽度或高度中较大的那个尺寸（1vm 和 1vh 较大的一者）

其它

fr: 是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配

calc()：可以进行运算

例子：height： calc(100% - 10px)

总结

在工作中，常用的CSS长度单位就那几个，对于其它长度单位的使用就比较少，但是用得少不代表不好用，通过总结CSS长度单位，也发现了一些平常中用得少但是很有用的长度单位。