margin負值5種應用

1. 在流動性佈局中的應用
　　如WordPress的兩欄式不固定佈局就是使用margin負值來實現的定位，屬於左右margin負值在流動性佈局中的應用。

1 <div style=」width:200px;float:left;border-right:4px solid #CEE1EE;margin-right:-200px;」>
2 　　左側寬度固定
3 </div>
4 <div style=」backround:#888;margin-left:200px;」>
5 　寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。
6 </div>

另一類兩欄自適應用到的是margin的上下負值，尤爲在一欄高度固定，另一欄高度不定的兩欄或多欄佈局中最爲常見。高度不固定欄和高度固定的欄上下錯開，均無浮動屬性，高度不固定的欄margin-top一個負值，大小就是高度固定欄的高度，實現了兩欄在同一水平線上。且寬度自適應，而且不用擔憂有浮動出現的一系列問題。

樣式部分：

1 .fixed-height{
2 　height:200px;
3 　width:200px;
4 　background:#666;
5 }
6 .flow-height{
7 　margin-top:-200px;
8 　margin-left:200px;
9 }

頁面結構：

1 <div class=」container」>
2 　<div class=」fixed-height」>
3 　　高度固定哦
4 　</div>
5 　<div class=」flow-height」>
6 　　高度寬度自適應，啦啦啦。。。高度寬度自適應，啦啦啦。。。
7 　</div>
8 </div>

2. 在選項卡等邊框線的處理
下圖顯示的是一種比較常見的選項卡。

如圖，使用margin-bottom:-1px;解決選項卡下邊框顯示的問題。[注：]使用margin-top、margin-bottom須要看結構如何寫，靈活使用。
相似的，若是您要用七個div實現8條1像素的左右邊框，可讓每一個div都有左右1像素的邊框，而後margin-right:-1px;或是margin-left:-1px;讓之間的邊框重疊來達到效果。

3. 圖片與文字對齊問題
　　當圖片與文字在一塊兒，每每都是不對齊的，由於圖片和文字默認是底部對齊。當圖片較小比較明顯，使用vertical-align:middle;對齊，在firefox，chrome下能達到理想效果，可是IE下仍是有點彆扭。
使用margin負值能在每一個瀏覽器上顯示徹底一致。img標籤支持margin四個方向的正的和負的定位。通常使用img標籤來顯示圖標，要與文字對齊達到理想的效果，能夠設置img{margin:0 3px -3px 0;}。

4. 隱藏首（末）邊框
　　本着結構儘可能簡潔，樣式代碼儘可能少，減小對js的依賴的原則，咱們能夠用樣式來實現列表項頭尾無邊框的效果，而無需額外設置諸如<li class=」last」>最後一個</li>

樣式部分：

 1 <style type=」text/css」>
 2 ul{
 3 　margin:30px;
 4 　padding:0;
 5 　width:300px;
 6 }
 7 li{ list-style:none;}
 8 /** 橫排模式 **/
 9 .cross{
10 　overflow:hidden;
11 　zoom:1;
12 } /** overflow:hidden隱藏最上邊border，IE6須要zoom:1 **/
13 .cross li {
14 　float:left;
15 　padding:0 11px 0 10px;
16 　border-left:1px solid #AAA;
17 　margin-left:-1px;
18 } /*margin負值隱藏掉最左邊邊框*/
19 /*豎排模式*/
20 .vertical {
21 　overflow:hidden;
22 　position:relative;
23 　zoom:1;
24 } /*IE下子容器若是包含屬性position:relative，則父容器失效(IE bug)，因此也須要設置父容器position:relative解決，IE6須要zoom:1來觸發haslayout*/
25 .vertical li{
26 　border-top:1px dashed #CEE1EE;
27 　padding:5px 0;
28 　position:relative;
29 　top:-1px;
30 } /*豎排margin負值IE6不兼容，改成positon方式處理，與margin負值原理相同*/
31 </style>

結構部分：

 1 <ul class=」cross」>
 2 <li>tab1-1</li>
 3 　<li>tab1-2</li>
 4 　<li>tab1-3</li>
 5 　<li>tab1-4</li>
 6 </ul>
 7 <ul class=」vertical」>
 8 　<li>這裏是一條信息</li>
 9 　<li>這裏是一條信息</li>
10 　<li>這裏是一條信息</li>
11 　<li>這裏是一條信息</li>
12 　<li>這裏是一條信息</li>
13 </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;