在上篇博客提到了%、px、em三个单位，其中最复杂的是em，因为要计算当前元素内的font-size，必须知道其父元素的font-size，层层累积，容易出错。现在CSS3中引入了新的单位rem，改变了这一现状。

rem

rem, 官方说法:根元素的font-size。官方这次说得很明白，rem是相对于根元素html来计算的，根当前元素的直接父元素无关，只要在html设置font-size就可以了，默认为1rem=16px。下面再看个例子：

.container{

width: 80%;

height: 10em;

padding: 1em;

background-color: #228F45;

font-size: 1.5rem;

}

.child{

width: 50%;

height: 5em;

background-color: #D5DED8;

padding: 0.8em;

font-size: 0.8rem;

}

html下1rem=16px，container下font-size=1.5*16=24px，1em=24px，height=24*10=240px,child下font-size=0.8*16=12.8px，1em=12.8px，height=12.8*5=64px。当然IE8及更低版本的IE是不支持rem的，因此在考虑到兼容性的时候，可以用px来hack。

其他

其他的单位in、cm、mm、pt、pc都是绝对单位，这些单位在web上用得比较少，与px间的换算关系如下
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

总结

目前这些单位中应用比较广泛的是px,em,rem,%，现在很火爆的bootstrap比较多的用到了em，如果不用支持IE8，可以考虑用rem，搞清楚这些单位的情况，有利于在画面准备的布局。

巴特西

CSS中的那点事儿（一）--- CSS中的单位2

rem

其他

总结

最新文章

热门文章