使用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」。而其中「相對」的意思是：
大家可以檢視這個彈性布局樣例。此時你使用瀏覽器的ui控制項改變了文字的大小或者直接「ctrl + 」和「ctrl - 」，你會發現這個彈性布局例項，在瀏覽器改變字型大小瀏覽會做出相應的放大和縮小，並不會影響整個頁面的布局。注：這個例項的所有html和css在本教程中教程了都會使用到。
至於其他的彈性布局的例項，大家可以瀏覽dan cederholm的******bites，並改變文字的大小去瀏覽。
體驗後，是不是覺得彈性布局的頁面很靈活呀，而且也像「px」一樣的精確。因此，只要我們掌握了「font-size」、「px」和「em」之間的基本關係，我們就可以民以食快速使用css建立精確的布局。
elastigirl的「em」是極其強大和靈活的，他不管字型大小是什麼，是12px，16或60，他都可以計算出其值。
em其實就是一種排版的測試單位，而且他的由來還有一段小故事，關於這段小故事我就不和大家說了，因為大家都不是來聽我講故事的，我想大還是喜歡知道他在css中的那些事。
在css中，「em」實際上是乙個垂直測量。乙個em等於任何字型中的字母所需要的垂直空間，而和它所佔據的水平空間沒有任何的關係，因此：
如果字型大小是16px，那麼1em=16px。
未完待續，這篇文章非常好。
em表示什麼長度單位 CSS中強大的EM
使用css也好久了，但一直都是在使用 px 來設定web元素的相關屬性，未敢使用 em 主要原因是，對其並不什麼了解，只知道一點概念性的東西，前段時間在專案中要求使用 em 作為單位設定元素，所以從頭對 em 學習了一回。稍為有一點理解，今天特意整理了乙份博文與大家一起分享，希望對童子們有些許的幫助...
CSS中的em單位
css中有眾多單位，常用的px是絕對單位，em則是相對單位。在響應式和移動端的大前提下，使用em能夠更方便快捷的一次性調整web文件極其html元素的字型大小 寬度 邊距 邊框等一系列屬性，可以說在某些方面，使用em作為單位比px更靈活。em是css中的乙個相對單位，它的單位長度是根據元素的文字垂直...
詳解css中的em單位
em是相對長度單位，相對於當前物件內文字的字型尺寸，也就是font size設定的大小。它的單位長度是根據元素的文字文字垂直長度來決定的。如當前對行內文字的字型尺寸未被人為設定，則尋找父級的font size,如果沒有父級或者父級沒有設定font size,就相對於瀏覽器的預設字型尺寸 16px 例...