使用CSS也好久了，但一直都是在使用“px”來設置Web元素的相關屬性，未敢使用“em”。主要原因是，對其并不什么了解，只知道一點概念性的東西，前段時間在項目中要求使用“em”作為單位設置元素，所以從頭對“em”學習了一回。稍為有一點理解，今天特意整理了一份博文與大家一起分享，希望對童子們有些許的幫助。

這篇教程將引導大家如何使用“em”來創建一個基本的彈性布局，從而學習其如何計算？又是如何使用“em”對層進行彈性擴展？又是如何擴展文本和圖像等內容？下在我們就一起帶著這些問題開始今天的“em”之行。

用戶的文字大小與彈性布局

用戶的瀏覽器默認渲染的文字大小是“16px”，換句話說，Web頁面中“body”的文字大小在用戶瀏覽器下默認渲染是“16px”。當然，如果用戶愿意他可以改變這種字體大小的設置，用戶可以通過UI控件來改變瀏覽器默認的字體大小。

彈性設計有一個關鍵地方Web頁面中所有元素都使用“em”單位值。“em”是一個相對的大小，我們可以這樣來設置1em，0.5em，1.5em等，而且“em”還可以指定到小數點后三位，比如“1.365em”。而其中“相對”的意思是：

相對的計算必然會一個參考物，那么這里相對所指的是相對于元素父元素的font-size。比如說：如果在一個<div>設置字體大小為“16px”，此時這個<div>的后代元素教程了是將繼承他的字體大小，除非重新在其后代元素中進行過顯示的設置。此時，如果你將其子元素的字體大小設置為“0.75em”，那么其字體大小計算出來后就相當于“0.75 X 16px = 12px”；如果用戶通過瀏覽器的UI控件改變了文字的大小，那么我們整個頁面也會進行放大（或縮小），不至于用戶改變了瀏覽器的字體后會致使整個頁面崩潰（我想這種現像大家都有碰到過，不信你就試試你自己制作過的項目，你會覺得很恐怖）。

大家可以查看這個彈性布局樣例。此時你使用瀏覽器的UI控件改變了文字的大小或者直接“ctrl + ”和“ctrl - ”，你會發現這個彈性布局實例，在瀏覽器改變字體大小瀏覽會做出相應的放大和縮小，并不會影響整個頁面的布局。注：這個實例的所有HTML和CSS在本教程中教程了都會使用到。

至于其他的彈性布局的實例，大家可以瀏覽Dan Cederholm的Simplebites，并改變文字的大小去瀏覽。

體驗后，是不是覺得彈性布局的頁面很靈活呀，而且也像“px”一樣的精確。因此，只要我們掌握了“font-size”、“px”和“em”之間的基本關系，我們就可以民以食快速使用CSS創建精確的布局。