更新時(shí)間：2013-11-08
頁面布局
用CSS 來布局很容易。如果你已經(jīng)習(xí)慣用表格布局的話，起先會感覺比較困難。其實(shí)不難，只不過動機(jī)不同，并且在實(shí)踐中更有意義。
你可以把這一頁面的各個(gè)部分當(dāng)作獨(dú)立的版塊來看待，無論你選擇哪一塊。你可以絕對或相對地用彼塊取代此塊。
定位
定位屬性position用于定義一個(gè)元素是否absolute（絕對），relative（相對），static（靜態(tài)），或者fixed（固定）。
static值是元素的默認(rèn)值，它會按照普通順序生成，就如它們在HTML的出現(xiàn)一般。
relative很像static，但可用top、right、bottom和left屬性來偏移原始位置。
absolute使元素從HTML普通流中分離出來，并把它送到一個(gè)完全屬于自己的定位世界。在這個(gè)稍微瘋狂的世界，這個(gè)絕對的元素可以放置到任何地方，只要設(shè)置了top、right、bottom和left的值。
fixed的行為也很像absolute，但參考于瀏覽器窗口相對于頁面而放置絕對的元素，所以，理論上，當(dāng)頁面滾動的時(shí)候，固定元素完全保持在瀏覽器視區(qū)中。為什么說理論上的？不為別的，在Mozilla和Opera中工作得很好，但I(xiàn)E不會。
用絕對定位布局
以下是引用片段：
This
That
The Other
Ra ra banjo banjo
Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.
（Ra ra banjo banjo）
你可以用絕對定位來創(chuàng)建一個(gè)傳統(tǒng)兩列布局，只要在HTML中使用如下面的類似規(guī)則： [轉(zhuǎn)載著名：W3C網(wǎng)頁標(biāo)準(zhǔn)學(xué)院]
并且應(yīng)用如下的CSS:
#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }
你將看到，長度為10em的導(dǎo)航條被設(shè)置在左邊。因?yàn)閷?dǎo)航是絕對定位的，對頁面的其他部分的流動不會有任何影響，所以所需要做的只是把內(nèi)容區(qū)域的左邊界寬度設(shè)置為與導(dǎo)航條寬度一樣就可以了。
實(shí)在是太容易了！然而你并不受這個(gè)兩列方法的限制。用精明的定位，你可以布置你所如你所需的更多的塊。比如，你需要增加第三列，你可以為HTML增加“navigation2”塊并且應(yīng)用如下CSS:
#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */ }
絕對定位元素的唯一副作用是，因?yàn)樗鼈兩钭约旱氖澜缋�，沒有辦法精確決定它們在哪兒結(jié)束。如果你使用上面的例子在一個(gè)少導(dǎo)航和多內(nèi)容區(qū)域，沒有什么問題，但是，特別是使用長度和寬度的相對值時(shí)，你經(jīng)常得放棄在下面放置任何事物如腳注的希望。如果你真的要做，與其絕對定位它們，不如浮動它們。
浮動
浮動將移動一個(gè)元素到同一線上的左邊或者右邊，而周圍也會有內(nèi)容浮動。
浮動經(jīng)常用在定位一個(gè)頁面內(nèi)的小型的元素（在本站的原始默認(rèn)CSS中HTML初級指南和CSS初級指南的“下一頁”連接就是浮動到右邊的。同樣參閱偽元素中的：first-letter例子），但同樣可以用在更大的塊中，比如導(dǎo)航列。
拿下面的HTML例子，你可以應(yīng)用隨后的CSS:
#navigation { float: left; width: 10em; }
#navigation2 { float: right; width: 10em; }
#content { margin: 0 10em; }
如果你不希望下一個(gè)元素環(huán)繞浮動對象，你可以使用clear（清除）屬性。clear: left將清除左邊元素，clear: right將清除右邊元素，而clear: both會清除左邊和右邊。所以，舉個(gè)例子，你需要一個(gè)頁面腳注，你可以用id“footer”為HTML增加一個(gè)塊，然后使用如下的CSS: [轉(zhuǎn)載著名：W3C 網(wǎng)頁標(biāo)準(zhǔn)學(xué)院]
#footer { clear: both; }
嗯，你已經(jīng)搞定了。一個(gè)腳注會出現(xiàn)在所有列的下邊，不管任何一個(gè)列有多長。 [轉(zhuǎn)載著名：W3C 網(wǎng)頁標(biāo)準(zhǔn)學(xué)院]
注意
我們已經(jīng)大體上介紹了地位和浮動，著重強(qiáng)調(diào)了頁面的“大”塊，但請記住，這些方法也可以用在這些塊內(nèi)的任何元素。綜合定位、浮動、邊界、補(bǔ)白和邊框，你可以再現(xiàn)任何的版式設(shè)計(jì)，在布局方面，沒有CSS完成不了表格所能完成的的事情。
使用表格布局的唯一理由是你試圖適應(yīng)古老的瀏覽器。這也是CSS實(shí)際上顯示其先進(jìn)的地方──在文件大小上，高易用性的頁面只相當(dāng)基于表格的頁面的一小部分。
