之前写 CSS 时，在长度单位这方面用的最多的就是 % 和 px。后来习惯了用 Bootstrap 框架，又学到了一个 em。最近在重学 CSS 时遇到了大量之前从未见过的 CSS 长度单位，大受震撼。顺手总结成文，以便时常翻阅温习。
%
% 是百分比，这是最容易理解，也是最常用的一个相对长度单位。
px
px 名称为像素。用来表示屏幕显示的一个点的大小。它是一个绝对长度单位，长度为 1/96 英寸。即在 DPI(Dots Per Inch) 为 96 的显示器上，1px 代表一个物理像素的大小。这也意味着在 DPI 高的设备上，1px 的宽度会不止一个物理像素。
pt
pt 名称为点。是一个印刷输出单位，一般不建议在 CSS 中使用。它同样也是一个绝对长度单位，长度为 1/72 英寸。
em
em 是一个相对长度单位。在 CSS 字体大小 font-size 属性中使用时是相对于父元素的字体大小；在其他长度(比如 width)或距离属性(padding)中使用时是相对于自身的字体大小。
rem
rem 是一个相对长度单位。它在任何 CSS 属性中使用时都是基于根元素的字体的相对大小。这个根元素可以是 <html> 标签，也可以是 :root 伪类。
vw
vw 是一个相对长度单位。它以当前浏览器窗口可视区域的宽度为总长度。1vw 等于这个长度的 1%。
vh
vh 与 vw 类似，不过是以浏览器窗口可视区域的高度为总长度。
vmax
vmax 是 vw 和 vh 的衍生单位，谁大它就用谁。当 vw > vh 时，vmax = vw；否则 vmax = vh。
vmin
vmin 和 vmax 类似，不过反过来了，谁小用谁。
fr
fr 是 fraction 的缩写。它不是一个通用的长度单位，主要在网格布局属性 grid 中使用。它可以根据容器元素的可用空间自动安排条目元素的长度。
lh
lh 是一个相对长度单位，它基于元素的行高。
ex
ex 是一个相对长度单位，有意思的是，它不基于页面上任何已有元素的大小。它使用的是字符 x 的高度。
ch
ch 和 ex 类似，它使用的是字符 0 的宽度。