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

這篇教程將引導(dǎo)大家如何使用“em”來(lái)創(chuàng)建一個(gè)基本的彈性布局，從而學(xué)習(xí)其如何計(jì)算？又是如何使用“em”對(duì)層進(jìn)行彈性擴(kuò)展？又是如何擴(kuò)展文本和圖像等內(nèi)容？下在我們就一起帶著這些問(wèn)題開(kāi)始今天的“em”之行。

什么是彈性布局？

用戶(hù)的文字大小與彈性布局

用戶(hù)的瀏覽器默認(rèn)渲染的文字大小是“16px”，換句話(huà)說(shuō)，Web頁(yè)面中“body”的文字大小在用戶(hù)瀏覽器下默認(rèn)渲染是“16px”。當(dāng)然，如果用戶(hù)愿意他可以改變這種字體大小的設(shè)置，用戶(hù)可以通過(guò)UI控件來(lái)改變?yōu)g覽器默認(rèn)的字體大小。

彈性設(shè)計(jì)有一個(gè)關(guān)鍵地方Web頁(yè)面中所有元素都使用“em”單位值。“em”是一個(gè)相對(duì)的大小，我們可以這樣來(lái)設(shè)置1em，0.5em，1.5em等，而且“em”還可以指定到小數(shù)點(diǎn)后三位，比如“1.365em”。而其中“相對(duì)”的意思是：

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

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

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

體驗(yàn)后，是不是覺(jué)得彈性布局的頁(yè)面很靈活呀，而且也像“px”一樣的精確。因此，只要我們掌握了