1 em
em表示父元素的字號的倍數。(特例：在text-indent屬性中，表示文字寬度。)
em爲單位的時候，font-size屬性是計算後再繼承，如box1計算出來是40px。那麼裏面的box2、box3繼承的都是40px。
em單位不僅僅可以用來設置字號，還可以設置任何盒模型的屬性，比如width、height、padding、margin、border
width: 30em;
height: 10em;
1個em是多少？要看父盒子的字號。父盒子字號是16px，那麼此時這個盒子的真實寬度高度： 480px*160px;
這個屬性不好用，是以父親的字號爲基準。很少使用。
2 rem
CSS3中，IE9開始兼容一個單位叫做rem。r就是root。
這個單位也是倍數，是html標籤字號的倍數。不看父親，一律看html標籤。
html標籤中，font-size設置爲16px。那麼全頁面都是以16px當做基準，也就是說1rem=16px。
em和rem區別非常大。em看父親的字號，rem看html標籤的字號。
設計師給你一個手機網頁的設計圖，這個設計圖一定是定寬的。
比如這個設計圖是600px寬度，logo 120px ， nav 彈性的 ， btn 120px
此時有經驗的前端開發工程師，一定不會用px當做單位，會進行計算。
比如html標籤的font-size:16px; 那麼120/16 = 7.5 ,所以logo的width就是7.5rem。
header .logo{
width: 7.5rem;
height: 2.5rem;
}
這麼做的好處是，可以配合媒體查詢，來進行顯示效果的增強，讓大屏幕用戶看到的東西真實的變大：
@media(min-width:320px){
html{
font-size: 14px;
}
}
@media(min-width:380px){
html{
font-size: 16px;
}
}
@media(min-width:440px){
html{
font-size: 18px;
}
}