負(fù)值之美：負(fù)margin在頁面布局中的應(yīng)用
論壇討論網(wǎng)址：http://bbs.blueidea.com/thread-2956530-1-1.html
本文轉(zhuǎn)載自:http://www.topcss.org/?p=94搏嗡，有修改跺嗽。
負(fù)數(shù)給人總是一種消極比然、否定、拒絕之感软免，不過有時(shí)利用負(fù)margin可以達(dá)到奇妙的效果宫纬，今天就表一表負(fù)值在頁面布局中的應(yīng)用。這里說的負(fù)值主要指的是負(fù)margin膏萧。
關(guān)于負(fù)margin的原理建議大家看看這篇文章：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
本文不講原理漓骚，主要展示幾個(gè)應(yīng)用。
一榛泛、左右列固定蝌蹂，中間列自適應(yīng)布局
此例適用于左右欄寬度固定，中間欄寬度自適應(yīng)的布局曹锨。由于網(wǎng)頁的主體部分一般在中間孤个，很多網(wǎng)頁都需要中間列優(yōu)先加載，而這種布局剛好滿足此需求沛简。
HTML：
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
CSS：
body{ margin:0; padding:0; min-width:600px; }
.main{ float:left; width:100%; }
.main_body{ margin:0 210px; background:#888; height:200px; }
.left,.right{ float:left; width:200px; height:200px; background:#F60; }
.left{ margin-left:-100%; }
.right{ margin-left:-200px; }
效果：
二齐鲤、去除列表右邊框
項(xiàng)目中經(jīng)常會使用浮動(dòng)列表展示信息，為了美觀通常為每個(gè)列表之間設(shè)置一定的間距（margin-right）,當(dāng)父元素的寬度固定式椒楣，每一行的最右端的li元素的右邊距就多余了给郊，去除的方法通常是為最右端的li添加class，設(shè)置*margin-right:0; *這種方法需要?jiǎng)討B(tài)判斷為哪些li元素添加class捧灰，麻煩Ｏ拧！凤壁！利用負(fù)margin就可以實(shí)現(xiàn)下面這種效果：
HTML：
<div id="test">
<ul>
<li>子元素1</li> <li>子元素2</li> <li>子元素3</li> <li>子元素4</li> <li>子元素5</li> <li>子元素6</li>
</ul>
</div>
CSS：
body,ul,li{ padding:0; margin:0;} ul,li{ list-style:none;}
#test{ width:320px; height:210px; background:#CCC; }
#test ul{ margin-right:-10px; zoom:1; }
#test ul li{ width:100px; height:100px; background:#F60; margin-right:10px; margin-bottom:10px; float:left; }
效果：
三吩屹、負(fù)邊距+定位：水平垂直居中
使用絕對定位將div定位到body的中心，然后使用負(fù)margin（content寬高的一半）拧抖，將div的中心拉回到body的中心煤搜，已到達(dá)水平垂直居中的效果。
HTML：
<div id="test"></div>
CSS：
body{margin:0;padding:0;}
#test{ width:200px; height:200px; background:#F60; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }
效果：
四唧席、去除列表最后一個(gè)li元素的border-bottom
列表中我們經(jīng)常會添加border-bottom值擦盾，最后一個(gè)li的border-bottom往往會與外邊框重合，視覺上不雅觀淌哟，往往要移除迹卢。
HTML：
<ul id="test">
<li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li>
</ul>
CSS：
body,ul,li{margin:0;padding:0;} ul,li{list-style:none;}
#test{ margin:20px; width:390px; background:#F4F8FC; border-radius:3px; border:2px solid #D7E2EC; }
#test li{ height:25px; line-height:25px; padding:5px; border-bottom:1px dotted #D5D5D5; margin-bottom:-1px; }
效果：
五、多列等高
此例關(guān)鍵是給每個(gè)框設(shè)置大的底部內(nèi)邊距徒仓，然后用數(shù)值相似的負(fù)外邊距消除這個(gè)高度腐碱。這會導(dǎo)致每一列溢出容器元素，如果把外包容器的overflow屬性設(shè)為hidden，列就在最高點(diǎn)被裁切症见。
HTML：
<div id="wrap">
<div id="left">
<p style="height:50px">style="height:50px"</p>
</div>
<div id="center">
<p style="height:100px">style="height:100px"</p>
</div>
<div id="right">
<p style="height:200px">style="height:200px"</p>
</div>
</div>
CSS：
body,p{ margin:0; padding:0; }
#wrap{ overflow:hidden; width:580px; margin:0 auto; }
#left,#center,#right{ margin-bottom:-200px; padding-bottom:200px; }
#left { float:left; width:140px; background:#777; }
#center { float:left; width:300px; background:#888; }
#right { float:right; width:140px; background:#999; }
p {color:#FFF;text-align:center}
效果：
