CSS中的EM屬性之彈性布局

發(fā)布時(shí)間：2013-04-07 14:45:43 作者：佚名

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

使用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”之行。

什么是彈性布局？

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

用戶的瀏覽器默認(rèn)渲染的文字大小是“16px”，換句話說(shuō)，Web頁(yè)面中“body”的文字大小在用戶瀏覽器下默認(rèn)渲染是“16px”。當(dāng)然，如果用戶愿意他可以改變這種字體大小的設(shè)置，用戶可以通過(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ì)”的意思是：

font-size

大家可以查看這個(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”一樣的精確。因此，只要我們掌握了“font-size”、“px”和“em”之間的基本關(guān)系，我們就可以民以食快速使用CSS創(chuàng)建精確的布局。

CSS的Elastigirl引進(jìn)EM

Elastigirl的“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等于任何字體中的字母所需要的垂直空間，而和它所占據(jù)的水平空間沒(méi)有任何的關(guān)系，因此：

如果字體大小是16px，那么1em=16px。

入門

在我們開(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è)面中的<body>就繼承了這個(gè)“font-size:16px;”，除非你在CSS樣式中顯式的設(shè)置<body>的“font-size”值，來(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è)?lt;body>中設(shè)置一個(gè)正文文本所需的字體大小，或者設(shè)置為“10px”，相當(dāng)于（“0.625em或62.5%”），這樣為了方便其子元素計(jì)算。這兩種都是可取的。但是我們都知道，<body>的默認(rèn)字體是“16px”，同時(shí)我們也很清楚了，我們改變了他的默認(rèn)值，要讓彈性布局不被打破，就需要重新進(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)始少不了很多的計(jì)算，有了他放心。

像素對(duì)于我們來(lái)說(shuō)太密切了，因此我們也將從這開(kāi)始。首先需要計(jì)算出1px和em之間的比例，然后是知道我們需要的px值。通過(guò)前面的介紹，大家都知道1em總是等于父元素的字體大小，因此我們完全可以通過(guò)下面的工式來(lái)計(jì)算：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

大家可以參考一下面這張轉(zhuǎn)換表(body字體為16px時(shí)的值)

接下來(lái)我們一起看一個(gè)很簡(jiǎn)單的實(shí)例“使用CSS的EM制作一個(gè)960px寬度的彈性布局”

HTML Markup

<body><div id="container">…</div></body>

將960px轉(zhuǎn)換為em

1 ÷ 16px × 960px = 60em

這個(gè)計(jì)算值的前提條件是<body>的“font-size:16px”。

CSS Code

html {font-size: 100%;}body {font-size: 1em;}#container {width: 60em;}

通過(guò)上面的實(shí)例，我想大家更能形像化的理解了，因?yàn)橛欣稍?，其?shí)我們可以把上面的計(jì)算公式轉(zhuǎn)換一下，將更方便你的計(jì)算：

需要轉(zhuǎn)換的像素值 ÷ 父元素的font-size = em值

那么我們上面的實(shí)例“960px”就可以這樣來(lái)轉(zhuǎn)換成“em”值

960px ÷ 16px = 60em

上面我們一起見(jiàn)證了“px”轉(zhuǎn)換成“em”的計(jì)算方式，接下來(lái)我們一起來(lái)動(dòng)看制作上面展示過(guò)的彈性布局樣例。下面我們主要一起來(lái)一步一步的實(shí)現(xiàn)他。

構(gòu)建一個(gè)彈性的容器

要?jiǎng)?chuàng)建彈性布局樣例那樣的居中效果，我們首先需要?jiǎng)?chuàng)建一個(gè)HTML結(jié)構(gòu)，我在此給創(chuàng)建一個(gè)<div>并且取名叫“wrap”

<body><div id="wrap"> content here</div></body>

我們希望這個(gè)容器是一個(gè)“740px”寬，適合一個(gè)“800px × 600px”顯屏的實(shí)例。那么“740px”會(huì)等于多少“em”呢？這就是我們需要關(guān)心的問(wèn)題，大家一起來(lái)看吧：

1、將“740px”轉(zhuǎn)換成“em”設(shè)置到我們的容器“div#wrap”：我們都知道“div#wrap”的父元素<body>設(shè)置了字體為“16px”，那么此時(shí)在沒(méi)有進(jìn)行另外顯示的設(shè)置時(shí)，他的子元素<div id="wrap">將繼承“font-size”值，這樣我們就可以輕意得到：“1px和1em之間的關(guān)系”

1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em

這樣一來(lái)，我們的“740px”就很容易的能轉(zhuǎn)換成“em”

0.0625em × 740 = 46.25em

當(dāng)然大家也可以按照我們前面所列出的計(jì)算公式來(lái)進(jìn)行轉(zhuǎn)換，這樣你心中更具有一個(gè)概念性，也不容易弄錯(cuò)：

1 ÷ 16 × 740 = 46.25em (1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值)

這樣一來(lái)，您可以使用上面的公式計(jì)算出您需要的任何寬度或高度的“em”值，你只需要知道“1px等于多少em”，另外就是你要轉(zhuǎn)換的“px”值是多少，具備這幾個(gè)參數(shù)你就能得到你想要的“em”值了。

2、創(chuàng)建CSS樣式：現(xiàn)在我們可以給“div#wrap”寫(xiě)樣式了，彈性布局樣例很明顯的告訴我們，給“div#wrap”設(shè)置了一個(gè)寬度為“740px”居中，帶有上下“margin”為“24px”，而且?guī)в?ldquo;1px”的邊框效果，那么我們首先根據(jù)上面的公式計(jì)算出相應(yīng)的“em值”，然后在寫(xiě)到CSS樣式中：

html {font-size: 100%;}body {font-size: 1em;}#wrap {width: 46.25em;/*740px ÷ 16 = 46.25em */margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/}

現(xiàn)在我們就輕松的創(chuàng)建了一個(gè)包含內(nèi)容的彈性容器：彈性布局樣例。

文本樣式與em

首先我們?cè)谇懊婺莻€(gè)創(chuàng)建的<div id="wrap"></div>中插入一個(gè)<h1>和一個(gè)<p>:

<div id="wrap"><h1>...</h1><p>...</p></div>

在彈性布局樣例實(shí)例中，我們標(biāo)題使用了“18px”，而段落設(shè)置的是“12px”字體，同時(shí)其行高是“18px”。18px將是我們實(shí)現(xiàn)彈性布局的一個(gè)重要值，可以使用他們都按正比變化。（有關(guān)于標(biāo)題和段落的排版介紹，大家感興趣可以點(diǎn)擊Richard Rutter的basic leading和vertical rhythm以及chapter on vertical motion的相關(guān)介紹）。

根據(jù)CSS繼承一說(shuō)，我們?cè)?ldquo;div#wrap”的內(nèi)容容器中沒(méi)有顯式的設(shè)置字體大小，這樣整個(gè)“div#wrap”將繼承了其父元素“body”的字體——“16px”。

1、給段落設(shè)置樣式：——“12px”的字體，“18px”的行高以及margin值

從CSS繼承中，我們可以得知我們所有段落繼承了其父元素“div#wrap”的“font-size:16px”。同時(shí)我們通過(guò)前面的介紹得知1px = 1 ÷ 16 = 0.0625em，這樣一來(lái)我們就很輕松的知道“12px”等于多少個(gè)“em”

0.0625em × 12 = 0.750em

這樣我們就可以給段落p設(shè)置樣式：

p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}

要計(jì)算出段落所需的行高和“margin”為“18px”，來(lái)滿足Richard Rutter說(shuō)的basic leading，那我們就需要像下面的方法和來(lái)計(jì)算：

18 ÷ 12 = 1.5em

使用所需的行高值“18px”直接除以“字體大小12px”，這樣就得到了段落“p”的“line-height”值。在本例中行高就等于字體的“1.5”倍，接著我們把“line-height”和“margin”樣式加到段落“p”中

p{font-size: 0.75em;/*0.625em × 12 = 0.750em */line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */}

2、給標(biāo)題設(shè)置一個(gè)18px的字號(hào)

標(biāo)題“h1”和段落“p”一樣的原理，他也是繼承他父元素“div#wrap”的“16px”的“font-size”，所以我們也是按同樣的方法可以計(jì)處出他的“em”

0.0625em × 18 = 1.125em

我們可以把得出的值寫(xiě)到CSS樣式表中

h1 {font-size: 1.125em;/*0.625em × 18 = 1.125em*/}

同樣為了保留Richard Rutter所說(shuō)的vertical rhythm，我們同樣將標(biāo)題“h1”的“line-height”和“margin”都設(shè)置為“18px”，使用方法前面介紹的方法。很容易得到他們的“em”值為“1em”:

h1 {font-size: 1.125em; /*0.625em × 18 = 1.125em*/line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */}

設(shè)置圖片大小——使用em

要做出彈性布局樣例這樣的果，我們也需要在html中插入一張圖片：

<body><div id="wrap"><h1>....</h1><p><img src="90.png" alt="" /> Lorem...</p></div></body>

我們這張圖片具有“90px”的寬和高，同時(shí)具有一個(gè)右邊距和底邊距為“18px”設(shè)置，而且還進(jìn)行左浮動(dòng)。下面我們就一起來(lái)看其如何實(shí)現(xiàn)圖片這幾個(gè)樣式效果：

從HTML結(jié)構(gòu)中，我們很清楚的知道，圖片是段落“p”的子元素，通過(guò)前面的介紹，你們知道這個(gè)段落“p”的“font-size”值被得定義為“12px”，因此我們計(jì)算圖片的屬性值時(shí)，不能在按“1px = 0.0625em”或者“1em=16px”來(lái)計(jì)算，我們需要使用最老的公式計(jì)算：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

這樣一來(lái)，按上面所示的公式，我們就可以計(jì)算出圖片的大?。?/p>

1 ÷ 12 × 90 = 7.5em

現(xiàn)在你就可以將計(jì)算出來(lái)的值寫(xiě)到樣式中去：

p img {width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度) = 7.5em */height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度) = 7.5em */}

我們?cè)诙温渲兄懒?ldquo;18px”剛好是“1em”，現(xiàn)在我們也把他使用到圖片的樣式中：

p img {width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度) = 7.5em */height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度) = 7.5em */margin: 0 1.5em 1.5em 0;float: left;}

這樣我們就制作出一個(gè)和彈性布局樣例一樣的效果。希望通過(guò)這樣的一個(gè)實(shí)例能幫助大家了解如何使用“em”來(lái)創(chuàng)建一個(gè)彈性布局的方法。當(dāng)然大家可能還在擔(dān)心使用“em”來(lái)制作一個(gè)彈性布局，不能像“px”一樣的的精確，如果你真正理解了這篇教程后，我想你不會(huì)在有這樣的想法。

彈性布局的公式總結(jié)

最后我想大家肯定和我會(huì)有同一種想法，就是相關(guān)參數(shù)是的“px”值如何成功而且正確的轉(zhuǎn)換成“em”值，經(jīng)過(guò)上面的學(xué)習(xí)，我最后將公式總結(jié)一下：

元素自身沒(méi)有設(shè)置字號(hào)大小時(shí)，元素的width、height、line-height、margin、padding、border等值轉(zhuǎn)換都按下面公式轉(zhuǎn)換：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

我們來(lái)看一個(gè)實(shí)例：

<body><div id="wrapper">test</div></body>

我們?cè)赽ody默認(rèn)字體大小為“16px”,此時(shí)需要“div#wrapper”的相關(guān)參數(shù)值為：

#wrapper {width: 200px;height: 100px;border: 5px solid red;margin: 15px;padding: 10px;line-height: 18px;}

那么我們按照上面的公式，將所在參數(shù)進(jìn)行轉(zhuǎn)換：

#wrapper {width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/}

我們一起來(lái)看計(jì)算出來(lái)的值：

接下來(lái)我需要大家在來(lái)看一個(gè)效果，這一點(diǎn)很關(guān)鍵喲，仔細(xì)看好，在同樣的參數(shù)基礎(chǔ)上稍加一條元素本身設(shè)置字體大小為：14px；，大家可以會(huì)說(shuō)很簡(jiǎn)單的呀，按前面的公式計(jì)算出來(lái)加上就是了，那么我現(xiàn)在就按大家說(shuō)的計(jì)算加上：

#wrapper {font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/}

此進(jìn)我們?cè)趂irebug下看計(jì)算出來(lái)的layout值

為了更好的說(shuō)明問(wèn)題，我把元素自身沒(méi)有設(shè)置字體大小和元素自身設(shè)置了字體大小，兩者在firebug計(jì)算出來(lái)值：

我截這個(gè)圖的主要意圖是，說(shuō)明一個(gè)問(wèn)題就是元素自身要是設(shè)置了字體大小后，其計(jì)算公式就不在是前面所說(shuō)的，我們需要做一下修改：

1、字體計(jì)算公式依舊

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

2、其它屬性的計(jì)算公式需要換成

1 ÷ 元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

那么我們現(xiàn)在來(lái)計(jì)算一回：

#wrapper {font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/}

我們?cè)趤?lái)看一次計(jì)算出來(lái)的值：

總結(jié)

長(zhǎng)篇介紹了一大堆，唯一想告訴大家的是以下幾點(diǎn)

1、瀏覽器的默認(rèn)字體大小是16px

2、如果元素自身沒(méi)有設(shè)置字體大小，那么元素自身上的所有屬性值如“boder、width、height、padding、margin、line-height”等值，我們都可以按下面的公式來(lái)計(jì)算

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

3、這一種千萬(wàn)要慢慢理解，不然很容易與第二點(diǎn)混了。如果元素設(shè)置了字體大小，那么字體大小的轉(zhuǎn)換依舊按第二條公式計(jì)算，也就是下面的：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

那么元素設(shè)置了字體大小，此元素的其他屬性，如“border、width、height、padding、margin、line-height”計(jì)算就需要按照下面的公式來(lái)計(jì)算：

1 ÷ 元素自身的font-size × 需要轉(zhuǎn)換的像素值 = em值

這樣說(shuō)，不知道大家理解了整明白了沒(méi)有，如果沒(méi)有整明白，可以回過(guò)頭來(lái)看上面的一個(gè)實(shí)例。

Tag：CSS屬性 EM屬性彈性布局

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中的EM屬性之彈性布局

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容