DIV布局之道二：DIV塊的嵌套，DIV盒子模型

本文講解DIV塊布局的第二種使用方式：嵌套。“DIV嵌套”在有些文獻中也被稱為“盒子模型”，說的通俗一點就是嵌套（一個大的DIV塊內部又包含一個或多個DIV塊）。

請看如下代碼：

CSS部分：

CSS Code 復制內容到剪貼板

/*嵌套樣式*/
.contain { width:200px; height:160px; margin:20px; padding:10px 20px 10px 20px; border:1px solid #FF6600; text-align:center}
.inner_contain { width:150px; height:30px; border:1px solid #009966}

HTML部分：

XML/HTML Code 復制內容到剪貼板

<div class="contain">
    <div class="inner_contain">
    </div>
    <div class="inner_contain">
    </div>
    <div class="inner_contain">
    </div>
</div>

這里就是一個使用DIV嵌套的例子，我們看到外圍有一個大的DIV嵌套了三個小DIV，其實現的效果如圖所示

IE6和IE7效果

 IE8和火狐效果

注意，這里的預覽效果是在IE6和IE7下顯示出來的效果，使用火狐和IE8，頁面預覽效果會不同，這是因為text-align:center這個屬性在IE8和火狐下不能夠使得內部的DIV塊也居中。我們為了讓內部的DIV也居中，可以給內部的DIV塊使用margin:0px auto屬性，即：

CSS Code 復制內容到剪貼板

.inner_contain { width:150px; height:30px; border:1px solid #009966; margin:0px auto;}

這時候，就實現了瀏覽器兼容。

DIV層可以實現多重嵌套，其內部可以多級嵌套多個DIV，這與表格嵌套類似，熟練使用DIV的嵌套可以很方便實現表格單元格實現的效果，例如一個三行兩列的表格，只需要在一個DIV內部嵌套6個DIV即可，當然復雜的表格結構還是不建議使用DIV布局，因為表格主要用於數據處理，所以在布局網頁的時候，要根據實際需要來選擇布局方式。

DIV嵌套布局網頁時候，尤其要注意DIV的外邊距（CSS中稱為“邊距”）和內邊距（CSS中稱為“補白”，DW中稱為“填充”），如圖：

這里的陰影部分就是上例中的外邊距和內邊距的模型圖，margin:20px即為外層的DIV邊距，padding:10px 20px 10px 20px（上-右-下-左的內邊距順序）即為外層DIV的內邊距（補白），DIV邊距的設置是個難點，設置不當極易出現網頁錯位、變形，所以關於邊距，從業者一定要時刻注意。