<div>標(biāo)簽定位樣式設(shè)置技巧
本文向大家描述一下<div>標(biāo)簽定位樣式設(shè)置技巧，在默認(rèn)的情形下，<div>標(biāo)簽所定義的區(qū)塊在網(wǎng)頁上會(huì)占據(jù)一列的位置，并且向右邊靠齊，要改變這種默認(rèn)的行為，只需定義float樣式屬性即可。
<div>標(biāo)簽定位樣式設(shè)置技巧
<div>標(biāo)簽被廣泛地應(yīng)用在網(wǎng)頁布局的相關(guān)設(shè)置上，CSS的幾個(gè)重要屬性提供了這方面的支持，例如float、overflow或是text-align等。適當(dāng)?shù)脑O(shè)計(jì)與套用樣式屬性，可以讓我們有效率地完成網(wǎng)頁布局的工作。
在默認(rèn)的情形下，<div>標(biāo)簽所定義的區(qū)塊在網(wǎng)頁上會(huì)占據(jù)一列的位置，并且向右邊靠齊，要改變這種默認(rèn)的行為，只需定義float樣式屬性即可。它主要的功能是定義對(duì)象在網(wǎng)頁上的浮動(dòng)位置，可能的屬性值有兩個(gè)：left與right，指定<div>靠左或靠右對(duì)齊。指定了這個(gè)屬性的<div>標(biāo)簽后，會(huì)自動(dòng)配置在同一行并且往左邊或是右邊靠攏，以下面的標(biāo)簽設(shè)置為例：
- <divstyledivstyle="height:127px;background:black">
- </div><divstyledivstyle="width:155px;height:336px;float:left;background:gray">
- </div><divstyledivstyle="width:155px;height:336px;float:right;background:gray">
- </div>
第1個(gè)標(biāo)簽未指定float，因此它占據(jù)了網(wǎng)頁最上方單一列的空間，第2及第3個(gè)<div>標(biāo)簽則緊接著在下面的位置，靠左及靠右配置，結(jié)果頁面如下：
除了指定float屬性，我們還可以通過嵌套式<div>標(biāo)簽的配置來達(dá)到<table>標(biāo)簽的效果。以一個(gè)3行×3列的表格為例，所需的<div>標(biāo)簽如下：
- <divstyledivstyle="width:auto;height:79px">
- <divstyledivstyle="width:100px;height:100px;
- float:left;background:red">
- </div><divstyledivstyle="width:100px;height:100px;
- float:left;background:blue">
- </div></div><divstyledivstyle="width:auto;height:79px">
- <divstyledivstyle="width:100px;height:100px;float:left;
- background:yellow">
- </div><divstyledivstyle="width:100px;height:100px;float:left;
- background:green">
- </div></div><divstyledivstyle="width:auto;
- height:79px">
- <divstyledivstyle="width:100px;height:100px;
- float:left;background:black">
- </div><divstyledivstyle="width:100px;
- height:100px;float:left;background:gray">
- </div>
- </div>
這段標(biāo)簽得到以下的頁面結(jié)果：
float屬性決定<div>區(qū)塊在網(wǎng)頁上的位置，如果要定義<div>區(qū)塊內(nèi)容元素的位置，則必須使用另外一個(gè)名稱為text-align的屬性。其中比較重要的屬性值有l(wèi)eft、right和center，使用這些屬性值，可以讓<div>內(nèi)容達(dá)到靠左、靠右或居中的效果。以下面的標(biāo)簽設(shè)計(jì)為例，3個(gè)<div>標(biāo)簽設(shè)置了不同的text-align屬性值。
- <divstyledivstyle="width:auto;height:100px;text-align:left">
- ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
- <divstyledivstyle="width:auto;height:100px;text-align:right">
- ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
- <divstyledivstyle="width:auto;height:100px;text-align:center">
- ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
巧用<div>標(biāo)簽搭配CSS樣式，可以讓我們達(dá)到所要呈現(xiàn)的網(wǎng)頁布局效果。當(dāng)你了解這些技巧之后，接下來就是根據(jù)自已的需求設(shè)計(jì)網(wǎng)頁版面。結(jié)束這一節(jié)的討論之前，還有一點(diǎn)要提醒讀者，CSS除了能有效地將樣式的設(shè)計(jì)從網(wǎng)頁內(nèi)容中分割出來、讓HTML標(biāo)簽專注在內(nèi)容的表示之外，最重要的一點(diǎn)是，它還能提升網(wǎng)頁加載的速度。當(dāng)用戶瀏覽網(wǎng)頁的時(shí)候，相關(guān)的CSS樣式文件只會(huì)加載一次，然后儲(chǔ)存在緩存中，當(dāng)下一個(gè)請(qǐng)求被傳送到服務(wù)器的時(shí)候，所需的CSS樣式文件則是直接從高速緩存中取出的。而未使用樣式文件的網(wǎng)頁則必須將整個(gè)網(wǎng)頁重載，你可以想象這兩者的性能差異，這也是不建議使用<table>標(biāo)簽設(shè)計(jì)布局的原因之一。
【編輯推薦】
