CSS中的那點事兒（一）--- CSS中的單位2

在上篇博客提到了%、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，搞清楚這些單位的狀況，有利於在畫面準備的佈局。