绝对长度

绝对长度单位即现实世界的度量单位。

单位	说明
in	英寸（1 in = 2.54 cm）
cm	厘米
mm	毫米
pt	磅（1 pt = 1/72 in）
pc	派卡（1 pc = 12 pt）
q	1/4 mm

相对长度

相对长度单位即另一种度量值的倍数。

单位	说明
%	百分比单位
px	像素（相对于屏幕分辨率）
em	相对于当前对象内文本字号的长度
rem	相对于根元素内文本字号的长度

%

对于普通定位元素就是相对于父元素。
对于 position: absolute 的元素是相对于已定位的父元素。
对于 position: fixed 的元素是相对于viewport。

em

相对于当前对象内文本字号的长度。如当前对象内文本字号未被设置，则相对于浏览器的默认字号（em会继承父级元素的字体尺寸）。

1	.box1 {font-size: 16px; border: 1em solid black;} /1rem=16px/

在box1中 font-size 为16px，则 1em=16px，box1的边框宽度为16px。

1 2	.box1 {font-size: 16px;} .box1 .box2 {font-size: 1em;} /1rem=16px/

box2为box1的子元素，并且box2文本字体尺寸未设置，则box2继承box1字体尺寸 1em=16px。

rem（root em）

相对于 html 根元素内文本字号的长度。在没有设置根元素文本字号的情况下字号由浏览器决定，不同浏览器存在差异。

1
2
3

html {font-size: 16px;}
.box1 {font-size: 2rem;}  /*1rem=16px*/
.box1 .box2 {font-size: 1rem;}  /*1rem=16px*/

因为 html 的 font-size 为16px 所以无论在box1还是box2中 1rem=16px。

关于chrome设置font-size:62.5%的问题

一般浏览器的默认文本字号为16px，所以为了方便计算可以设置 html{font-size:62.5%;}，页面根元素的字号为 16px*62.5%=10px 则 1rem=10px。
但是在chrome中，浏览器的极限最小字号为12px。设置根元素字号为62.5% 即10px，chrome依旧会把字号视为12px，所以在chrome中设置 font-size:62.5% 会实际出现 1rem=12px 的情况。因此可以设置 html{font-size:625%;}，这样根元素字号为100px，则 1rem=100px。

其他相对长度

vw
viewpoint width的缩写，相对于视区宽度的长度，1vw等于视区宽度的1%。
vh
viewpoint height的缩写，相对于视区高度的长度，1vh等于视区高度的1%。
vmin
1vmin等于最短视区轴长（高度与宽度较小）的1%。
vmax
1vmax等于最长视区轴长（高度与宽度较大）的1%。

举例：
假设一视区尺寸为1200px * 900px（宽度为1200px，长度为900px）。
1 vw = 1200px*1% = 12 px
1 vh = 900px*1% = 9 px
1 vmin = 900px*1% = 9 px
1 vmax = 1200px*1% = 12 px

ch
相对于当前元素内数字 “0” 宽度的长度。即当前字体显示的字符的平均宽度，一般与数字 “0” 宽度相当。
如当前对象内文本的字号未被人为设置，则相对于浏览器的默认字号。
ex
相对于当前元素内字母 “x” 高度的长度。即字体基线到中线之间的距离，一般与字母 “x” 高度相当，通常为字体高度的一半。
如当前对象内文本的字号未被人为设置，则相对于浏览器的默认字号。