相对长度单位

%

（常用）
相对于父级容器的百分比，一般指宽度或者高度的百分比。
用于字号的时候，是基于父级字号的百分比。
比如：

width:100% //那么宽度跟父级容器的宽度是一样的。
margin-left:5% //左外边距为父级容器宽度的5%。
margin-top:1% //上外边距为父级容器宽度的1%。（之前有说过是高度的1%，是错误的。在此纠正。）
font-size:100% //那么字号跟父级字号相同。

em

（常用）
相对于同级字号的单位。1em即1倍于字号。
举例:

.content{
font-size:12px;
height:2em;
}

得出.content的高度为24px。
 

rem

（常用）
虽然上面使用em的情况可能会在开发中用到，但是我们有时候想有一个基准来扩展。
遇到这种需求时，我们可以使用rem单位，rem中的“r”代表“root”，这意味着设置当前元素的字体大小为根元素，大多数情况下，我们会设置在html元素上。
基准字号建议固定字号。不要是使用相对单位的字号。

html,body{
font-size:12px;
}
h1{
font-size:2rem;
}

那么h1的字号是24px。
 

vw

（不常用）
屏幕宽度的1%。例如font-size:50vw。那么这个字的宽度相当于屏幕当前宽度的一半了。
 

vh

（不常用）
屏幕高度的1%。例如一个div的高度是:50vh。那么这个div的高度为屏幕当前高度的一半。
 

vmin

（很少用）
相对于屏幕宽度或高度的较小的那个尺寸的1%。比如，宽1280px，高度800px。那么1vmin就是800px的1%。
 

vmax

（很少用）
相对于屏幕宽度或高度的较大的那个尺寸的1%。比如，宽1280px，高度800px。那么1vmin就是1280px的1%。
 

ex

（很少用）
一个ex是一个字体的x-height。 (x-height通常是字体尺寸的一半。是通常。具体x-height这个高度是怎么来的，请点击这里)
举例:

.content{
font-size:12px;
height:3ex;
}

得出.content的高度大约为18px，有误差。
 

ch

相对于数字0的宽度。就是1ch等于一个0的宽度。加入要创建一个正好能横排十个0的容器，那么容器的宽度就是10ch。
 
 

绝对长度单位

px

（常用）
像素 (1px = 1/96th of 1in)
* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
 

pt

（不常用）
点 (1pt = 1/72 of 1in)
 

cm

（很少用）
厘米
 

mm

（很少用）
毫米
 

in

（很少用）
英寸inches (1in = 96px = 2.54cm)
 

pc

（很少用）
派卡 (1pc = 12 pt)
 

相关英语

em = 来源于element（元素）
vw = viewport width = （设备)视口宽度
vh = viewport height = （设备)视口高度