最近做的專案中經常會用到margin的負值，這裡就總結一下關於margin負值的5種使用及相關bug的解決。
1. 在流動性布局中的應用
如wordpress的兩欄式不固定布局就是使用margin負值來實現的定位，屬於左右margin負值在流動性布局中的應用。
左側寬度固定
寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。
另外一類兩欄自適應用到的是margin的上下負值，尤其在一欄高度固定，另外一欄高度不定的兩欄或多欄布局中最為常見。高度不固定欄和高度固定的欄上下錯開，均無浮動屬性，高度不固定的欄margin-top乙個負值，大小就是高度固定欄的高度，實現了兩欄在同一水平線上。且寬度自適應，並且不用擔心有浮動出現的一系列問題。
樣式部分：
.fixed-height
.flow-height
頁面結構：
高度固定哦
高度寬度自適應，啦啦啦。。。高度寬度自適應，啦啦啦。。。
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。
4. 隱藏首（末）邊框
本著結構盡量簡潔，樣式**盡量少，減少對js的依賴的原則，我們可以用樣式來實現列表項頭尾無邊框的效果，而無需額外設定諸如最後乙個
樣式部分：
結構部分：
5.頁面上實現css sprite背景定位效果
使用img定義margin的負值實現類似background-position效果。此方法能減少乙個頁面請求數，但是有違樣式與布局分離的原則，因此不推薦使用。
ps:使用margin負值在ie6/ie7下的bug：有一部分被隱藏掉了
人人前端測試
解決方法：新增position:relative; zoom:1;
margin負值的應用總結
margin負值 之前一直 應用都是定位 和 列表的時候，從來沒有想著進行個總結，直到遇到了在專案中遇到了 乙個margin負值 但是寬度增加的問題 才想著研究下 margin負值的問題。現將網上找到資料和文章，加上自己理解整理如下 1.元素水平垂直居中 這個彈框要絕對居中啊 tips top和le...
margin負值問題
1 原理 2 對普通文件流中元素 指不是浮動元素也不是絕對定位 固定定位的元素等 的影響 負邊距對由普通文件流控制的元素的作用是，會使它們在文件流中的位置發生偏移，這種偏移不同於相對定位 通過相對定位偏移後的元素仍然會堅守著它原來佔據的空間，不會讓文件流的其它元素乘虛而入 通過負邊距進行偏移的元素，...
理解margin負值
上和左方的margin負值使元素向上和左方向移動，如果該元素position不是absolute或fixed，這還會導致之後的元素也向上，左移 下和右方的margin負值會縮小下和右方的空間，使處於該元素下，右方的元素被拉向該元素，使之後的元素發生向上，左移，以至於與之重疊 由於margin在上下左...