第三章 CSS網頁布局與定位

3.1 div

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

3.1.1 div是什么

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

3.1.2 如何使用div

只需要應用<div></div>標簽，將內容放置其中，便可以應用div標簽。但是，div標簽之聲一個標識，作用是把內容標識成一個塊區域，并不負責其他事情。

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

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

3.1.3 理解div

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

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

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

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

從頁面效果發現，網頁中除了文字之外，沒有任何其他效果。兩個div之間的關系只是前后關系，并沒有出現類似于表格的田字型，因此，div本身與樣式沒有任何關系。樣式是需要編寫CSS來實現的。

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