长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %，大概可以分为几种“绝对单位”和“相对单位”和“百分比单位”。
绝对单位：px in cm mm
相对单位：em rem pt pc ex ch
百分比单位：vw vh vm %
下面主要说几个常用的单位
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
rem在移动端应用可参考淘宝的页面http://m.taobao.com
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持
其它的单位还有：
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大约1/72寸
pc:pica，大约6pt，1/6寸
ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)
ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
| 长度单位 | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 不支持 | 19.0 | 不支持 | 20.0 |
注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。
px
即像素pixel，它是最基础也是最常用的一个长度单位
前端和设计师都要知道的css长度单位
cm
厘米， 1cm=37.8px
mm
毫米，1mm=3.78px
in
即英尺inch， 1in=2.54cm=96px
pt
即点point，1pt=1/72in=1.33px
pc
即派卡，1pc=12pt=16px，派卡是印刷行业的长度单位
相对长度
em
前端和设计师都要知道的css长度单位
一个字符大小，字符大小在浏览器中默认为16px
EM特点
-1. em的值并不是固定的；
-2. em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：
-1. body选择器中声明Font-size=62.5%；
-2. 将你的原来的px数值除以10，然后换上em作为单位；
-3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
避免1.2 * 1.2= 1.44的现象，比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem
rem是CSS3新增的一个相对单位（root em，根em）, 相对于根元素HTML的字体大小。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。
简单点说就是根em.
百分比%
百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小
关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素，它的包含块是视口（viewport）
vh
视口高度，默认为视口高度的1%
vw
视口宽度，默认为视口宽度的1%