使用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」。而其中「相對」的意思是：
設定字型大小為「16px」，此時這個
的後代元素教程了是將繼承他的字型大小，除非重新在其後代元素中進行過顯示的設定。此時，如果你將其子元素的字型大小設定為「0.75em」，那麼其字型大小計算出來後就相當於「0.75 x 16px = 12px」；
如果使用者通過瀏覽器的ui控制項改變了文字的大小，那麼我們整個頁面也會進行放大(或縮小)，不至於使用者改變了瀏覽器的字型後會致使整個頁面崩潰(我想這種現像大家都有碰到過，不信你就試試你自己製作過的專案，你會覺得很恐怖)。
大家可以檢視這個彈性布局樣例。此時你使用瀏覽器的ui控制項改變了文字的大小或者直接「ctrl + 」和「ctrl - 」，你會發現這個彈性布局例項，在瀏覽器改變字型大小瀏覽會做出相應的放大和縮小，並不會影響整個頁面的布局。注：這個例項的所有html和css在本教程中教程了都會使用到。
至於其他的彈性布局的例項，大家可以瀏覽dan cederholm的******bites，並改變文字的大小去瀏覽。
體驗後，是不是覺得彈性布局的頁面很靈活呀，而且也像「px」一樣的精確。因此，只要我們掌握了「font-size」、「px」和「em」之間的基本關係，我們就可以民以食快速使用css建立精確的布局。
css的elastigirl引進em
elastigirl的「em」是極其強大和靈活的，他不管字型大小是什麼，是12px，16或60，他都可以計算出其值。
em其實就是一種排版的測試單位，而且他的由來還有一段小故事，關於這段小故事我就不和大家說了，因為大家都不是來聽我講故事的，我想大還是喜歡知道他在css中的那些事。
在css中，「em」實際上是乙個垂直測量。乙個em等於任何字型中的字母所需要的垂直空間，而和它所佔據的水平空間沒有任何的關係，因此：
如果字型大小是16px，那麼1em=16px。
入門在我們開始來了解css中的這個「em」之前，我們需要知道在瀏覽器下，他的預設字型大小。正好我們前面也這樣做了，在所有現代瀏覽器中，其預設的字型大小就是「16px」。因此在瀏覽器下預設的設定將是：
1em = 16px
因此，在乙個css選擇器被寫入時，瀏覽器就有了乙個「16px」大小的預設字型。此時我們web頁面中的
就繼承了這個「font-size:16px;」，除非你在css樣式中顯式的設定的「font-size」值，來改變其繼承的值。這樣一來，「1em = 16px」、「0.5em = 8px」、「10em = 160px」等等，那麼我們也可以使用「em」來指定任何元素的大小。
設定body的font-size
很多前輩在多年的實踐中得出乙個經驗，他們建議我們在
中設定乙個正文文字所需的字型大小，或者設定為「10px」，相當於(「0.625em或62.5%」)，這樣為了方便其子元素計算。這兩種都是可取的。但是我們都知道，的預設字型是「16px」，同時我們也很清楚了，我們改變了他的預設值，要讓彈性布局不
em表示什麼長度單位 什麼是水的硬度及單位表示？
水的硬度是指水中鈣離子與鎂離子的總濃度，也稱全硬度或總硬度。硬度的單位有mmol l與mg l caco3 等，其中1mmol l 50mg l caco3 除全硬度概念之外，根據水中碳酸類離子的情況，將硬度可有以下分類。碳酸鹽硬度與非碳酸鹽硬度。碳酸鹽硬度是指水中鈣 鎂的碳酸氫鹽與碳酸鹽之和 非碳...
CSS的長度單位 em 與em標籤
css支援多種長度單位。它們可被分成兩大類 絕對長度單位 以不依賴於顯示裝置的絕對尺寸來定義 長度 相對長度 相對其它為瀏覽器所知的單位來定義長度 絕對長度度量可使用五種單位 英吋 in 厘公尺 cm 公釐 mm 磅 point，寫作 pt 字高 pica，寫作pc 磅和字高通常被用作印刷單位，其中...
CSS中的em單位
css中有眾多單位，常用的px是絕對單位，em則是相對單位。在響應式和移動端的大前提下，使用em能夠更方便快捷的一次性調整web文件極其html元素的字型大小 寬度 邊距 邊框等一系列屬性，可以說在某些方面，使用em作為單位比px更靈活。em是css中的乙個相對單位，它的單位長度是根據元素的文字垂直...