html 自适应单位vw,CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比

css单位我们常用的是px,也即是像素。随着网页开发自适应的要求，css3新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等。

em

做前端的应该对em不陌生，不是什么罕见的单位，是相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px(浏览器的默认值)，那么 1em = 16px。

不过，这样使用很复杂，很难很好的与px进行对应，因此，前端开发的前辈们总结了一个经验：

body{font-size:62.5%;

}

那么，这样之后 1em = 10px 在布局等使用的时候好换算了很多。

百分比

百分比相信大家更不会陌生了，百分比一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素(offset parent)

3、对于position: fixed;的元素是相对于 ViewPort。(viewport：可视窗口，也就是浏览器的window那么大。)

rem

rem支持IE9及以上，意思是相对于根元素html(网页)，不会像em那样，依赖于父元素的字体大小，而造成混乱。使用起来安全了很多。

html{font-size:62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/}body{1.4rem; *1.4 × 10px = 14px *h1{font-size:2.4rem; *2.4 × 10px = 24px**/}

这样整个网页都会比较统一！不会造成混乱！

rem单位确实好处蛮多的，它是相对于根节点，让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是，你用过了就知道，它会出现一个问题：

用Chrome浏览器打开你做的网站的时候，有时候会出现字体很大的情况。但是刷新一下页面就好了。

之