本文向大家描述一下<div>標(biāo)簽定位樣式設(shè)置技巧，在默認(rèn)的情形下，<div>標(biāo)簽所定義的區(qū)塊在網(wǎng)頁上會占據(jù)一列的位置，并且向右邊靠齊，要改變這種默認(rèn)的行為，只需定義float樣式屬性即可。

<div>標(biāo)簽定位樣式設(shè)置技巧

<div>標(biāo)簽被廣泛地應(yīng)用在網(wǎng)頁布局的相關(guān)設(shè)置上，CSS的幾個重要屬性提供了這方面的支持，例如float、overflow或是text-align等。適當(dāng)?shù)脑O(shè)計(jì)與套用樣式屬性，可以讓我們有效率地完成網(wǎng)頁布局的工作。

在默認(rèn)的情形下，<div>標(biāo)簽所定義的區(qū)塊在網(wǎng)頁上會占據(jù)一列的位置，并且向右邊靠齊，要改變這種默認(rèn)的行為，只需定義float樣式屬性即可。它主要的功能是定義對象在網(wǎng)頁上的浮動位置，可能的屬性值有兩個：left與right，指定<div>靠左或靠右對齊。指定了這個屬性的<div>標(biāo)簽后，會自動配置在同一行并且往左邊或是右邊靠攏，以下面的標(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個標(biāo)簽未指定float，因此它占據(jù)了網(wǎng)頁最上方單一列的空間，第2及第3個<div>標(biāo)簽則緊接著在下面的位置，靠左及靠右配置，結(jié)果頁面如下：

除了指定float屬性，我們還可以通過嵌套式<div>標(biāo)簽的配置來達(dá)到<table>標(biāo)簽的效果。以一個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)容元素的位置，則必須使用另外一個名稱為text-align的屬性。其中比較重要的屬性值有l(wèi)eft、right和center，使用這些屬性值，可以讓<div>內(nèi)容達(dá)到靠左、靠右或居中的效果。以下面的標(biāo)簽設(shè)計(jì)為例，3個<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)頁的時候，相關(guān)的CSS樣式文件只會加載一次，然后儲存在緩存中，當(dāng)下一個請求被傳送到服務(wù)器的時候，所需的CSS樣式文件則是直接從高速緩存中取出的。而未使用樣式文件的網(wǎng)頁則必須將整個網(wǎng)頁重載，你可以想象這兩者的性能差異，這也是不建議使用<table>標(biāo)簽設(shè)計(jì)布局的原因之一。
 

【編輯推薦】

1. CSS HACK和瀏覽器兼容問題的解決方法
2. CSS屬性選擇器語法詳解
3. CSS中DIV彈出層問題解決方案
4. 七大CSS選擇符用法詳解
5. 探究CSS高級語法中選擇器分組和CSS繼承用法