CSS单位

长度单位主要有以下几种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+支持)

注意: 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%