DIV CSS 佈局教程網

本文和大家重點討論一下DIV+CSS網頁布局中margin的優化，margin是我們在進行CSS布局中非常常用的屬性之一，但如果運用不得當，往往會產生過多的垃圾代碼，讓我們的編碼體積不斷增加。

DIV+CSS網頁布局中margin優化的一種思路

margin是我們在進行CSS布局中非常常用的屬性之一，但如果運用不得當，往往會產生過多的垃圾代碼，讓我們的編碼體積不斷增加。今天我們介紹一種編碼優化的小實例，通過此例希望大家能意識到代碼優化的途徑是多種多樣的，也算是一個拋磚引玉的引子吧。

看XHtml代碼：

<dividdivid="main"> 
<dividdivid="body1"> 
<dividdivid="content1"> 
</div> 
</div> 
<dividdivid="body2"> 
</div> 
<div> 
 

看下面的CSS代碼：（未優化）

#main{  
margin:5px0px5px0px;  
}  
#body1{  
margin:12px0px10px0px;  
}  
#content{  
margin:8px0px2px0px;  
}  
#body2{  
margin:10px0px15px0px;  
}  
 

用Dreamweaver進行設置的CSS，應該是屬於這一類，它是未優化的，很多代碼都是多余的，因為軟件畢竟是軟件，目前還沒有能替人作一些思考。我們對上面的CSS進行優化。

看下面的經過優化的CSS代碼：

#main{}  
#body1{  
margin-top:17px;  
}  
#content{  
margin:8px0px2px0px;  
}  
#body2{  
margin:20px0px;  
}  
 

我們來分析一下優化的思路：首先#main{margin:5px0px5px0px;}是沒有必要的，他無非定義的就是整個頁面的上、下外邊距（在一定場合下卻需要這樣書寫）。我們同樣可以通過定義#body1的上邊距和#body2的下邊距來設置，所以才有了#body1{margin-top:17px;}和#body2{margin:20px0px;}（這裡定義的是#body2的上下邊距為20px，左右邊距為0px，也是縮寫的一種方式。）同理，於是我們可以省略了#body1的下邊距，在#content層在定義上邊距，另外大家還需要先弄清楚層的嵌套關系，否則容易讓你思路非常不清晰。

【編輯推薦】

1. CSS中padding-bottom 屬性用法
2. 實例解析CSS padding 屬性用法
3. 探究IE和Firefox下的2款HTTP調試工具用法
4. CSS教程：詳解margin和padding屬性應用場合
5. CSS中padding-bottom和padding-right屬性的區別