CSS高級(jí)教程頁面布局_CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

用CSS 來布局很輕易。假如你已經(jīng)習(xí)慣用表格布局的話，起先會(huì)感覺比較困難。其實(shí)不難，只不過動(dòng)機(jī)不同，并且在實(shí)踐中更有意義。
你可以把這一頁面的各個(gè)部分當(dāng)作獨(dú)立的版塊來看待，無論你選擇哪一塊。你可以絕對或相對地用彼塊取代此塊。

定位

定位屬性position用于定義一個(gè)元素是否absolute（絕對），relative（相對），static（靜態(tài)），或者fixed（固定）。
static值是元素的默認(rèn)值，它會(huì)按照普通順序生成，就如它們在HTML的出現(xiàn)一般。
relative很像static，但可用top、right、bottom和left屬性來偏移原始位置。
absolute使元素從HTML普通流中分離出來，并把它送到一個(gè)完全屬于自己的定位世界。在這個(gè)稍微瘋狂的世界，這個(gè)絕對的元素可以放置到任何地方，只要設(shè)置了top、right、bottom和left的值。
fixed的行為也很像absolute，但參考于瀏覽器窗口相對于頁面而放置絕對的元素，所以，理論上，當(dāng)頁面滾動(dòng)的時(shí)候，固定元素完全保持在瀏覽器視區(qū)中。為什么說理論上的？不為別的，在Mozilla和Opera中工作得很好，但I(xiàn)E不會(huì)。

用絕對定位布局

你可以用絕對定位來創(chuàng)建一個(gè)傳統(tǒng)兩列布局，只要在HTML中使用如下面的類似規(guī)則：

示例代碼 [www.hl5o.cn]

<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

并且應(yīng)用如下的CSS：

示例代碼 [www.hl5o.cn]

#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#content {
margin-left: 10em;
}

你將看到，長度為10em的導(dǎo)航條被設(shè)置在左邊。因?yàn)閷?dǎo)航是絕對定位的，對頁面的其他部分的流動(dòng)不會(huì)有任何影響，所以所需要做的只是把內(nèi)容區(qū)域的左邊界寬度設(shè)置為與導(dǎo)航條寬度一樣就可以了。
實(shí)在是太輕易了！然而你并不受這個(gè)兩列方法的限制。用精明的定位，你可以布置你所如你所需的更多的塊。比如，你需要增加第三列，你可以為HTML增加“navigation2”塊并且應(yīng)用如下CSS：

示例代碼 [www.hl5o.cn]

#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)常得放棄在下面放置任何事物如腳注的希望。假如你真的要做，與其絕對定位它們，不如浮動(dòng)它們。

浮動(dòng)

浮動(dòng)將移動(dòng)一個(gè)元素到同一線上的左邊或者右邊，而四周也會(huì)有內(nèi)容浮動(dòng)。
浮動(dòng)經(jīng)常用在定位一個(gè)頁面內(nèi)的小型的元素（在本站的原始默認(rèn)CSS中HTML初級(jí)指南和CSS初級(jí)指南的“下一頁”連接就是浮動(dòng)到右邊的。同樣參閱偽元素中的:first-letter例子），但同樣可以用在更大的塊中，比如導(dǎo)航列。
拿下面的HTML例子，你可以應(yīng)用隨后的CSS：

示例代碼 [www.hl5o.cn]

#navigation {
float: left; width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}

假如你不希望下一個(gè)元素環(huán)繞浮動(dòng)對象，你可以使用clear（清除）屬性。clear: left將清除左邊元素，clear: right將清除右邊元素，而clear: both會(huì)清除左邊和右邊。所以，舉個(gè)例子，你需要一個(gè)頁面腳注，你可以用id“footer”為HTML增加一個(gè)塊，然后使用如下的CSS:

示例代碼 [www.hl5o.cn]

#footer {
clear: both;
}

嗯，你已經(jīng)搞定了。一個(gè)腳注會(huì)出現(xiàn)在所有列的下邊，不管任何一個(gè)列有多長。

注重
我們已經(jīng)大體上介紹了地位和浮動(dòng)，著重強(qiáng)調(diào)了頁面的“大”塊，但請記住，這些方法也可以用在這些塊內(nèi)的任何元素。綜合定位、浮動(dòng)、邊界、補(bǔ)白和邊框，你可以再現(xiàn)任何的版式設(shè)計(jì)，在布局方面，沒有CSS完成不了表格所能完成的的事情。
使用表格布局的唯一理由是你試圖適應(yīng)古老的瀏覽器。這也是CSS實(shí)際上顯示其先進(jìn)的地方──在文件大小上，高易用性的頁面只相當(dāng)基于表格的頁面的一小部分。