的后代元素教程了是將繼承他的字體大小，除非重新在其后代元素中進(jìn)行過(guò)顯示的設(shè)置。此時(shí)，如果你將其子元素的字體大小設(shè)置為“0.75em”，那么其字體大小計(jì)算出來(lái)后就相當(dāng)于“0.75X16px=12px”；如果用戶通過(guò)瀏覽器的UI控件改變了文字的大小，那么我們整個(gè)頁(yè)面也會(huì)進(jìn)行放大（或縮?。?，不至于用戶改變了瀏覽器的字體后會(huì)致使整個(gè)頁(yè)面崩潰（我想這種現(xiàn)像大家都有碰
4、到過(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í)例，大家可以瀏覽DanCederholm的Simplebites，并改變文字的大小去瀏覽。體驗(yàn)后，是不是覺(jué)得彈性布局的頁(yè)面很靈活呀，而且也像“px”一樣的精確。因此，只
5、要我們掌握了“font-size”、“px”和“em”之間的基本關(guān)系，我們就可以民以食快速使用CSS創(chuàng)建精確的布局。CSS的Elastigirl引進(jìn)EMElastigirl的“em”是極其強(qiáng)大和靈活的，他不管字體大小是什么，是12px，16或60，他都可以計(jì)算出其值。em其實(shí)就是一種排版的測(cè)試單位，而且他的由來(lái)還有一段小故事，關(guān)于這段小故事我就不和大家說(shuō)了，因?yàn)榇蠹叶疾皇莵?lái)聽(tīng)我講故事的，我想大還是喜歡知道他在CSS中的那些事。在CSS中，“em”實(shí)際上是一個(gè)垂直測(cè)量。一個(gè)em等于任何字體中的字母所需要的垂直空間，而
6、和它所占據(jù)的水平空間沒(méi)有任何的關(guān)系，因此：如果字體大小是16px，那么1em=16px。入門(mén)在我們開(kāi)始來(lái)了解CSS中的這個(gè)“em”之前，我們需要知道在瀏覽器下，他的默認(rèn)字體大小。正好我們前面也這樣做了，在所有現(xiàn)代瀏覽器中，其默認(rèn)的字體大小就是“16px”。因此在瀏覽器下默認(rèn)的設(shè)置將是：1em=16px因此，在一個(gè)CSS選擇器被寫(xiě)入時(shí)，瀏覽器就有了一個(gè)“16px”大小的默認(rèn)字體。此時(shí)我們Web頁(yè)面中的
就繼承了這個(gè)“font-size:16px;”，除非你在CSS樣式中顯式的設(shè)置的“font-s
7、ize”值，來(lái)改變其繼承的值。這樣一來(lái)，“1em=16px”、“0.5em=8px”、“10em=160px”等等，那么我們也可以使用“em”來(lái)指定任何元素的大小。設(shè)置Body的font-size很多前輩在多年的實(shí)踐中得出一個(gè)經(jīng)驗(yàn)，他們建議我們?cè)?body>中設(shè)置一個(gè)正文文本所需的字體大小，或者設(shè)置為“10px”，相當(dāng)于（“0.625em或62.5%”），這樣為了方便其子元素計(jì)算。這兩種都是可取的。但是我們都知道，
的默認(rèn)字體是“16px”，同時(shí)我們也很清楚了，我們改變了他的默認(rèn)值，要讓彈性布局不被打破，
8、就需要重新進(jìn)行計(jì)算，重新進(jìn)行調(diào)整。所以完美的設(shè)置是：body{font-size:1em;}可是在那個(gè)沒(méi)人愛(ài)的IE底下，“em”會(huì)有一個(gè)問(wèn)題存在。調(diào)整字體大小的時(shí)候，同樣會(huì)打破我們的彈性布局，不過(guò)還好，有一個(gè)方法可以解決：html{font-size:100%;}公式轉(zhuǎn)換——PXtoEM如果你是第一創(chuàng)建彈性布局的，最好在身邊準(zhǔn)備一個(gè)計(jì)算器，因?yàn)槲覀円婚_(kāi)始少不
