本文講解div塊布局的第二種使用方式：巢狀。「div巢狀」在有些文獻中也被稱為「盒子模型」，說的通俗一點就是巢狀（乙個大的div塊內部又包含乙個或多個div塊）。
請看如下**：
css部分：
css code
複製內容到剪貼簿
/*巢狀樣式*/
.contain
.inner_contain
html部分：
xml/html code
複製內容到剪貼簿
<
divclass
="contain"
>
<
divclass
="inner_contain"
>
div>
<
divclass
="inner_contain"
>
div>
<
divclass
="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
這時候，就實現了瀏覽器相容。
div層可以實現多重巢狀，其內部可以多級巢狀多個div，這與**巢狀類似，熟練使用div的巢狀可以很方便實現**單元格實現的效果，例如乙個三行兩列的**，只需要在乙個div內部巢狀6個div即可，當然複雜的**結構還是不建議使用div布局，因為**主要用於資料處理，所以在布局網頁的時候，要根據實際需要來選擇布局方式。
div巢狀布局網頁時候，尤其要注意div的外邊距（css中稱為「邊距」）和內邊距（css中稱為「補白」，dw中稱為「填充」），如圖：
這裡的陰影部分就是上例中的外邊距和內邊距的模型圖，margin
:20px即為外層的div邊距，padding
:10px
20px
10px
20px（上-右-下-左的內邊距順序）
即為外層div的內邊距（補白），div邊距的設定是個難點，設定不當極易出現網頁錯位、變形，所以關於邊距，從業者一定要時刻注意。
DIV布局之道一 DIV塊的水平併排 垂直併排
iv布局網頁元素的方式主要有三種 平鋪 併排 巢狀 覆蓋 遮擋 本文先講解平鋪 併排 方式。1 垂直平鋪 垂直排列 請看如下 css部分 css code 複製內容到剪貼簿 lay1 lay2 lay3 html部分 xml html code 複製內容到剪貼簿 divclass lay1 div ...
CSS 巢狀DIV布局
巢狀div布局，會牽扯到css的position屬性 如果內層div將position屬性設定為absolute，並設定left，和top等屬性，還需要考慮外層div的position屬性設定。absolute absolute絕對定位，直接指定top left right bottom。有意思的是...
css中的div布局之巧用div
新手在頁面布局時往往很依賴div來分割頁面，例如下面這個頁面 這是乙個聊天的頁面，頁面有頭像，id，聊天內容以及時間。看到這個頁面我的第一思路是用三個div來進行操作。首先乙個大的div，在大的div中分左右兩個子div，然後在左div中新增，右邊的div中新增文字資訊。如下 talk body d...