CSS布局實例：margin優化的一種思路_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
margin是我們在進行CSS布局中非經常用的屬性之一，但假如運用不得當，往往會產生過多的垃圾代碼，讓我們的編碼體積不斷增加。今天我們介紹一種編碼優化的小實例，通過此例希望大家能意識到代碼優化的途徑是多種多樣的，也算是一個拋磚引玉的引子吧。
看XHTML代碼：
看下面的CSS代碼：（未優化）
看下面的經過優化的CSS代碼：
我們來分析一下優化的思路：首先#main{margin:5px 0px 5px 0px;}是沒有必要的，他無非定義的就是整個頁面的上、下外邊距（在一定場合下卻需要這樣書寫）。我們同樣可以通過定義#body1的上邊距和#body2的下邊距來設置，所以才有了#body1{margin-top:17px ;}和#body2{margin:20px 0px ;}（這里定義的是#body2的上下邊距為20px，左右邊距為0px，也是縮寫的一種方式。）同理，于是我們可以省略了#body1的下邊距，在#content層在定義上邊距，另外大家還需要先弄清楚層的嵌套關系，否則輕易讓你思路非常不清楚。
看XHTML代碼：
示例代碼 [www.ghpqjb.com]
<div id="main">
<div id="body1">
<div id="content1">
</div>
</div>
<div id="body2">
</div>
<div>
<div id="body1">
<div id="content1">
</div>
</div>
<div id="body2">
</div>
<div>
看下面的CSS代碼：（未優化）
示例代碼 [www.ghpqjb.com]
#main {
margin:5px 0px 5px 0px;
}
#body1 {
margin:12px 0px 10px 0px;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:10px 0px 15px 0px;
}
margin:5px 0px 5px 0px;
}
#body1 {
margin:12px 0px 10px 0px;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:10px 0px 15px 0px;
}
看下面的經過優化的CSS代碼：
示例代碼 [www.ghpqjb.com]
#main {}
#body1 {
margin-top:17px ;
}
#content {
margin:8px 0px 2px 0px;
}
#body2 {
margin:20px 0px ;
}
#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層在定義上邊距，另外大家還需要先弄清楚層的嵌套關系，否則輕易讓你思路非常不清楚。
相關DIV+CSS實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-CSS布局實例：margin優化的一種思路
。