左和右的css負邊距對元素寬度的影響
負邊距不只能影響元素在文檔流中的位置，還能增長元素的寬度！
這個做用能實現的前提是：該元素沒有設定width屬性（固然width:auto是能夠的）。
好比下圖的黑灰色部分是一個塊狀元素，它沒有設定寬度。它被包裹在一個寬度爲400px,且水平居中的父元素中。
如今給這個元素的設一個margin-right:-100px;
咱們看到它的寬度的確變長100px;而後再給它設一個margin-left:-100px;
咱們看到它變得更寬了。
負的margin會改變元素的寬度，這的確很讓人費解，若是說負邊距會改變元素在文檔流中的位置仍是很好理解的話，那改變寬度這種現象還真的蠻讓人難以想象的。
1 那這貨有什麼用途呢？我就舉一個例子吧。
想 要建立上圖中黑框內的幾個元素按順序排下來，中間帶些間隔的佈局要怎麼作？，固然最簡單省事的方法就是利用浮動了。咱們把黑框裏面的子元素向左浮動，而後 設一個合適的margin-right,是否是就辦到了呢？但由於外邊黑框的寬度是固定的，就是裏面四個子元素的寬度加上三列間隔的寬度，因此靠近右邊邊 界的子元素就不該該有正向的margin-right了，不然這一行就只能容納三個子元素了。有人說那這還不簡單，給靠近右邊界的那些子元素加一個 class，把它的margin-right設爲0不就好了。這固然能夠，但若是這些子元素是在模板中經過循環動態輸出的，那在循環的時候還得判斷哪些子 元素是靠近右邊邊界的，若是是就加上一個class。這樣作的話是否是就有點麻煩了？因此解決辦法是加大子元素的父容器的寬度，讓它可以容納一行中有四個 子元素加上四列間隔的寬度，而後最外面的的黑框的那個容器設一個overflow:hidden就好了。上面說了負的左右邊距能加大元素的寬度，因此給子 元素的父容器設一個合適的負的margin-right就能夠了。固然你也能夠直接在css中把子元素的父容器的寬度設寬一些，舉這個例子只是爲了說明負 邊距也是一種方法。看下完整的代碼：
<style>
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
.container{ height:210px; width:460px; border:5px solid #000;}
ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一個負的margin-right,至關於把ul的寬度增長了20px*/
li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}
</style>
<div class="container">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
<li>子元素7</li>
<li>子元素8</li>
</ul>
</div>
2 css負邊距對絕對定位元素的影響
css絕對定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離，這個元素自身的邊界指的就 是margin定義的邊界，因此，若是margin爲正的時候，那它的邊界是向外擴的，若是margin爲負的時候，則它的邊界是向裏收的。利用這點，就 有了經典的利用絕對定位來居中的方法：
但該方法的缺點是必需要知道要居中元素的高度和寬度
3. 圖片與文字對齊問題
當圖片與文字在一塊兒，每每都是不對齊的，由於圖片和文字默認是底部對齊。當圖片較小比較明顯，使用vertical-align:middle;
對齊，在firefox，chrome下能達到理想效果，可是IE下仍是有點彆扭。
使用margin負值能在每一個瀏覽器上顯示徹底一致。img標籤支持margin四個方向的正的和負的定位。
通常使用img標籤來顯示圖標，要與文字對齊達到理想的效果，能夠設置img{margin:0 3px -3px 0;}。
4. 隱藏首（末）邊框
本着結構儘可能簡潔，樣式代碼儘可能少，減小對js的依賴的原則，咱們能夠用樣式來實現列表項頭尾無邊框的效果，而無需額外設置諸如<li class=」last」>最後一個</li>
樣式部分：
<style type=」text/css」>
ul{
margin:30px;
padding:0;
width:300px;
}
li{ list-style:none;}
/** 橫排模式 **/
.cross{
overflow:hidden;
zoom:1;
} /** overflow:hidden隱藏最上邊border，IE6須要zoom:1 **/
.cross li {
float:left;
padding:0 11px 0 10px;
border-left:1px solid #AAA;
margin-left:-1px;
} /*margin負值隱藏掉最左邊邊框*/
/*豎排模式*/
.vertical {
overflow:hidden;
position:relative;
zoom:1;
} /*IE下子容器若是包含屬性position:relative，則父容器失效(IE bug)，因此也須要設置父容器position:relative解決，IE6須要zoom:1來觸發haslayout*/
.vertical li{
border-top:1px dashed #CEE1EE;
padding:5px 0;
position:relative;
margin-top:-1px;
} /*豎排margin負值IE6不兼容，改成positon方式處理，與margin負值原理相同*/
</style>
結構部分：
<ul class=」cross」>
<li>tab1-1</li>
<li>tab1-2</li>
<li>tab1-3</li>
<li>tab1-4</li>
</ul>
<ul class=」vertical」>
<li>這裏是一條信息</li>
<li>這裏是一條信息</li>
<li>這裏是一條信息</li>
<li>這裏是一條信息</li>
<li>這裏是一條信息</li>
</ul>
5.頁面上實現css sprite背景定位效果
使用img定義margin的負值實現相似background-position效果。此方法能減小一個頁面請求數，可是有違樣式與佈局分離的原則，所以不推薦使用。
ps:
使用margin負值在IE6/IE7下的bug：有一部分被隱藏掉了
<div style=」height:120px;width:120px; border: 5px solid #888; 「>
<div style=」background-color:#CEE1EE;margin-top: -10px;position:relative;zoom:1″>
<a href=」http://fed.renren.com/」>人人前端測試</a></div>
</div>
解決方法：添加position:relative; zoom:1;