第三章 CSS網(wǎng)頁布局與定位

3.1 div

幾乎XHTML中的任何標(biāo)簽都可以用于浮動與定位，而div首當(dāng)其沖。對于其他標(biāo)簽而言，往往有它自身存在的目的，而div元素存在的目的就是為了浮動與定位。

3.1.1 div是什么

div是XHTML中制定的、專門用于布局設(shè)計的容器對象。在傳統(tǒng)表格式布局中，之所以能夠進行頁面的排版布局設(shè)計，完全依賴于表格對象table。如今，接觸另一種布局方式——CSS布局。div正是這種布局方式的核心對象。僅從div的使用上說，做一個簡單的布局只需要依賴兩樣?xùn)|西：div與CSS。因此有人稱CSS布局為div+css布局。

3.1.2 如何使用div

只需要應(yīng)用<div></div>標(biāo)簽，將內(nèi)容放置其中，便可以應(yīng)用div標(biāo)簽。但是，div標(biāo)簽之聲一個標(biāo)識，作用是把內(nèi)容標(biāo)識成一個塊區(qū)域，并不負責(zé)其他事情。

div標(biāo)簽中除了直接放入文本外，也可以放入其他標(biāo)簽，還可以多個div進行嵌套使用，最終目的是合理地標(biāo)識出內(nèi)容區(qū)域。

在使用div標(biāo)簽時，可以加入一些屬性，比如id、class、align、style等。在CSS布局方法，為了實現(xiàn)內(nèi)容與表現(xiàn)的分離，不應(yīng)當(dāng)將align、style兩個屬性編寫在XHTML頁面的div標(biāo)簽中，因此，最終的div代碼只能擁有以下兩種形式：

復(fù)制代碼代碼如下:
<div id=”id名稱”>…</div>
<div class=”class名稱”>…</div>

3.1.3 理解div

在一個沒有任何CSS應(yīng)用的頁面中，即使應(yīng)用了div，也沒有任何實際效果。那又如何理解div在布局上的重大潛能呢？嘗試編寫兩個div，用于左分欄與右分欄，代碼如下：

復(fù)制代碼代碼如下:
<div>左分欄</div>
<div>右分欄</div>

此時瀏覽器能夠看到的僅僅是上下兩行文字，并沒有看出div的任何特征。

要記住一點，div是一個block對象——塊對象（或者塊級元素）。XHTML中的所有對象，幾乎都默認(rèn)為兩種對象類型：

block塊狀對象：塊對象指的是當(dāng)前對象顯示為一個方塊。默認(rèn)顯示狀態(tài)下，它將占據(jù)整行，其他的對象只能在下一行顯示。
in-line行間對象（或者稱內(nèi)聯(lián)元素）：與block對象相反，它允許下一個對象與之共享一行進行顯示。
塊狀div說明，它在頁面中并非用于類似于文本那樣的行間排版，而是用于大面積，大區(qū)域的塊狀排版。

從頁面效果發(fā)現(xiàn)，網(wǎng)頁中除了文字之外，沒有任何其他效果。兩個div之間的關(guān)系只是前后關(guān)系，并沒有出現(xiàn)類似于表格的田字型，因此，div本身與樣式?jīng)]有任何關(guān)系。樣式是需要編寫CSS來實現(xiàn)的。

在CSS布局中，所要做的工作可以簡單歸集為兩件事：一是使用div將內(nèi)容標(biāo)記出來，二是為了這個div編寫所需的CSS樣式。