3.1 定義Div

Div與其他HTML標簽一樣，是一個HTML所支持的標簽。例如，當制作一個列表時，應用<ol></ol>這樣的結構，Div在使用時同樣也是以<div></div>的形式出現。

3.1.1 什么是Div

Div是HTML中指定的標簽，專門用于布局設計的容器對象。Div可以定義文檔中的分區或節（division/section），也可以把文檔分隔為獨立的、不同的部分。它可以被用作嚴格的組織工具，并且可以不與任何格式關聯。

Div是一個容器，能夠放置內容，例如：

在HTML頁面中的每個標簽對象幾乎都可以稱得上是一個容器，如p段落標簽對象，這里p作為一個容器，其中可以放入內容：

接下來學習一種布局方式，即CSS布局方式，Div是這種布局方式的核心對象，使用CSS布局的頁面不需要依賴任何其他標簽。僅從Div的使用上來說，進行一個簡單的布局只需要Div與CSS，因此也可以稱為Div+CSS布局。

3.1.2 插入Div

與其他HTML對象一樣，只需在代碼中應用<div></div>標簽形式，將內容放置其中，便可以應用Div。

提示

Div只是一個標識，作用是把內容標識為一個區域，并不負責其他事情，Div只是CSS布局工作的第一步，需要通過Div將頁面中的內容元素標識出來，而為內容添加樣式則由CSS來完成。

除了可以在Div中直接放入文本和其他標簽，還可以將多個Div進行嵌套使用，最終的目的是合理地標識出頁面中的區域。

使用Div同使用其他HTML標簽一樣，可以加入其他屬性，如id、class、align、style等，而在CSS布局方面，為了實現表現與內容的分離，不應當將對齊屬性align、行間樣式表屬性style編寫在HTML頁面的Div中，因此，Div代碼只可能擁有以下兩種形式：

使用id屬性，可以為當前這個Div指定一個id名稱，在CSS中使用id選擇符進行樣式編寫。同樣，可以使用class屬性，在CSS中使用class選擇符進行樣式編寫。

提示

在當前HTML頁面中，同一個id名稱只允許使用一次，而class名稱則可以重復使用。

在一個沒有應用CSS的頁面中，即使應用了Div，也沒有任何實際效果，就如同直接輸入了Div中的內容一樣，那么該如何理解Div在布局上所帶來的不同呢？

使用Div布局頁面，編寫代碼如下：

此時預覽僅能看到出現了兩行文字，并沒有看出Div的任何特征，顯示效果如圖3-1所示。

從圖3-1中可以看出，Div對象本身就是占據整行的一種對象，不允許其他對象與它在一行中并列顯示，實際上，Div就是一個塊狀（block）對象。

提示

HTML中的所有對象幾乎都默認為以下兩種類型。

（1）block（塊狀）對象：指的是當前對象顯示為一個方塊，默認的顯示狀態下將占據整行，其他對象在下一行顯示。

（2）in-line（行間）對象：正好和block對象相反，它允許其他對象與它在同一行中顯示。

Div在頁面中并非用于類似于文本的行間排版，而是用于大面積、大區域的塊狀排版。另外，從頁面的效果中發現，網頁中除文字之外沒有任何其他效果，兩個Div之間只是前后關系，因此可以說，Div本身與樣式沒有任何關系，樣式需要通過CSS來實現，從本質上實現了Div與樣式分離。

提示

這樣做的好處：Div與樣式分離，最終樣式由CSS來完成。這樣的與樣式無關的特性，使得Div在設計中擁有巨大的可伸縮性，設計師可以根據自己的想法改變Div的樣式，不再受單元格固定模式的束縛。

因此，在CSS布局中需要做的工作可以簡單歸結為兩個步驟：首先使用Div將內容標記出來，其次為這個Div編寫合適的CSS規則代碼。

3.1.3 Div的嵌套和固定格式

Div可以進行多層嵌套使用，嵌套的目的是實現更為復雜的頁面排版，如當設計一個網頁時，首先需要有整體布局，將頁面分為頂部、中部和底部，這也許會產生一個復雜的Div結構：

在上段代碼中，為每個Div定義了id名稱以供識別，可以看到id名稱為top、main和bottom的3個對象屬于并列關系。在網頁的布局結構中，如果以垂直方向布局為例，該段代碼代表如圖3-2所示的一種布局關系。

由于內容需要，有可能在main中使用左、右欄的布局，因此在main中增加了兩個id名稱分別為left與right的對象，這兩個對象是并列關系。因此它們與main形成了一種嵌套關系，如果left和right被樣式控制為左右顯示，那么它們最終的布局關系應如圖3-3所示。

網頁布局由這些嵌套著的Div構成，無論多么復雜的布局方法，都可以通過Div之間的并列與嵌套關系來實現。