CSS布局執行個體：margin最佳化的一種思路

css|最佳化

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

看XHTML代碼：

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

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

#main {
     margin:5px 0px 5px 0px;
}
#body1 {
     margin:12px 0px 10px 0px;
}
#content {
     margin:8px 0px 2px 0px;
}
#body2 {
     margin:10px 0px 15px 0px;
}

　　我本人不使用Dreamweaver進行開發，在我看來用Dreamweaver進行設定的CSS，應該是屬於這一類，它是未最佳化的，很多代碼都是多餘的，因為軟體畢竟是軟體，目前還沒有能替人作一些思考。我們對上面的CSS進行最佳化。

看下面的經過最佳化的CSS代碼：

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

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