本文和大家重點(diǎn)討論一下DIV+CSS網(wǎng)頁(yè)布局中margin的優(yōu)化，margin是我們?cè)谶M(jìn)行CSS布局中非常常用的屬性之一，但如果運(yùn)用不得當(dāng)，往往會(huì)產(chǎn)生過(guò)多的垃圾代碼，讓我們的編碼體積不斷增加。

DIV+CSS網(wǎng)頁(yè)布局中margin優(yōu)化的一種思路

margin是我們?cè)谶M(jìn)行CSS布局中非常常用的屬性之一，但如果運(yùn)用不得當(dāng)，往往會(huì)產(chǎn)生過(guò)多的垃圾代碼，讓我們的編碼體積不斷增加。今天我們介紹一種編碼優(yōu)化的小實(shí)例，通過(guò)此例希望大家能意識(shí)到代碼優(yōu)化的途徑是多種多樣的，也算是一個(gè)拋磚引玉的引子吧。

看XHTML代碼：

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

看下面的CSS代碼：（未優(yōu)化）

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

　　用Dreamweaver進(jìn)行設(shè)置的CSS，應(yīng)該是屬于這一類，它是未優(yōu)化的，很多代碼都是多余的，因?yàn)檐浖吘故擒浖壳斑€沒(méi)有能替人作一些思考。我們對(duì)上面的CSS進(jìn)行優(yōu)化。

看下面的經(jīng)過(guò)優(yōu)化的CSS代碼：

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

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

【編輯推薦】

1. CSS中padding-bottom 屬性用法
2. 實(shí)例解析CSS padding 屬性用法
3. 探究IE和Firefox下的2款HTTP調(diào)試工具用法
4. CSS教程：詳解margin和padding屬性應(yīng)用場(chǎng)合
5. CSS中padding-bottom和padding-right屬性的區(qū)別