CSS em rem vh vw calc() line-height 百分比

CSS单位

em

相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px（浏览器的默认值），那么 1em = 16px

body {

font-size: 62.5%;

}

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

百分比

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

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

3、对于position: fixed;的元素是相对于 ViewPort

rem

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

html {font-size: 62.5%; /10 ÷ 16 × 100% = 62.5% 1rem = 10px /}

body {font-size: 1.4rem; /1.4 × 10px = 14px /}

h1 { font-size: 2.4rem; /2.4 × 10px = 24px/}

vh, vw

vw Viewport宽度， 1vw 等于viewport宽度的1%

vh Viewport高度， 1vh 等于viewport高的的1%

vw和vh会随着viewport变化自动变化，再也不用js控制全屏了。

甚至有些人丧心病狂的字体大小都用vw和vh控制，来达到字体和viewport大小同步的效果。

vmin,vmax

vmin vw和vh中比较 小 的值

vmax vw和vh中比较 大的值

IE10+ 和现代浏览器都已经支持vmin

webkit浏览器之前不支持vmax，新版已经支持，所有现代浏览器已经支持，但是IE 全部不支持vmax

ch,ex

ch 字符0的宽度

ex 小写字符x的高度

IE9+ 和现代浏览器都已经支持,这两个单位时根据 当前font-family 的相对单位。

calc()

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.haorooms {
width: calc(expression);
}
//margin是20px。那么我们就可以写成
.haorooms{
width: calc(100% - 20px);  //注：减号前后要有空格，否则很可能不生效！！
}

line-height百分比

line-height:26px; 表示行高为26个像素

line-heigth:120%;表示行高为当前字体大小的120%

line-height:2.6em; 表示行高为当前字体大小的2.6倍

带单位的行高都有继承性，其子元素继承的是计算值，如父元素的字体大小为14px，定义行高line-height:2em;则计算值为 28px

不带单位的行高是直接继承，而不是计算值，如父元素字体尺寸为14px，行高line-height:2;子元素字体为12px，不需要再定义行高，他默认的行高为24px。