一、負margin介紹
通常人們很少使用負margin但隨後你會了解到，它能做的其實有很多。以下是幾條有關負margin需要注意的地方：
- A、負margin是絕對標準的CSS
- 這不是開玩笑。W3C甚至標註過：對於margin屬性來說，負值是被允許的。這是Nuff說的，查看這篇文章會有更多詳細內容。
- B、負maring不是一種hack方法
- 千真萬確，不能因爲缺乏對負marign的理解，或者因爲它長得像hack，就認爲它是一種hack方法。除非你是用來修復自己在其他地方造成的錯誤。
- C、不脫離文檔流
- 不使用float的話，負margin元素是不會破壞頁面的文檔流。所以如果你使用負margin上移一個元素，所有跟隨的元素都會被上移。
- D、完全兼容
- 所有現代瀏覽器都完全支持負margin（IE6在大多數情況下也支持）。
- E、浮動會影響負margin的使用
- 負margin不是你每天都用的CSS屬性，應用時應小心謹慎。
如果說正margin是與其他元素隔開，那麼負margin就是吸引其他元素，並且覆蓋，請看例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{width:100px;height:100px;border: 1px solid;}
.div1{background-color: red;}
.div2{margin-top: -50px;background-color: blue;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
藍色div覆蓋在了紅色div之上，所以負margin可能會有層級問題，注意用z-index調節
二、2列右側自適應佈局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.div1{width: 190px;margin-right: -190px;float: left;;}
.div1 div{background-color: red;height: 200px;}
.div2{width:100%;float: right;}
.div2 div{background-color: blue;margin-left: 200px;height: 200px;}
</style>
</head>
<body>
<div class="div1">
<div></div>
</div>
<div class="div2">
<div></div>
</div>
</body>
</html>
感覺上有點兒像絕對定位的味道，好像紅色div覆蓋在了藍色div之上。同理也可以實現三列布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.div1{width: 190px;margin-right: -190px;float: left;;}
.div1 div{background-color: red;height: 200px;}
.div2{width:100%;float: left;}
.div2 div{background-color: blue;margin-left: 200px;height: 200px;margin-right: 200px;}
.div3{width: 190px;margin-left: -190px;float: right;}
.div3 div{height: 200px;background-color: yellow;}
</style>
</head>
<body>
<div class="div1">
<div></div>
</div>
<div class="div3">
<div></div>
</div>
<div class="div2">
<div></div>
</div>
</body>
</html>
要注意的是順序問題，div3要寫在div2的前面，不然2個右浮動會產生疊加效果
三、3列對齊佈局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */
</style>
</head>
<body>
<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham</li>
<li class="col2 top">Bread</li>
<li class="col2">Butter</li>
<li class="col3 top">Flour</li>
<li class="col3">Cream</li>
</ul>
</body>
</html>
非常輕鬆的就實現了3列的佈局，並且沒有用任何浮動，或者定位，
注意一點，負margin向上移動時，後面的元素也會向上移動，所以垂直方向，多個元素設置負margin，對於後面的元素來說，實際上效果是會疊加的。
四、div實現單線邊框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{margin: 10px auto; width: 980px;}
ul{width:300px;*zoom:1;}
li{display:inline;float: left;width:50%;}
li div{border:1px solid;height: 50px;}
.odd{margin-left: -1px;margin-top: -1px;}
.even{margin-top: -1px;}
.hover div{border-color: #f40;position: relative;z-index: 10;zoom:1;}
.head{border: 1px solid;}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('li:odd div').addClass('odd');
$('li:even div').addClass('even');
$('li').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
})
})
</script>
</body>
</html>
這個效果是看到淘寶的商品列表，突發奇想，div如何實現像table一樣的border-collpase，單線邊框。沒錯依舊是用負margin來實現
我用了jquery來輔助實現，jquery的選擇器索引是從0開始，所以第一個元素是偶數，第二個是奇數，以此類推。偶數個li，margin-top：-1px;
奇數個li margin-top:-1px margin-left:-1px ; 非常簡單是不是？ 不過負margin會有覆蓋的問題，當我鼠標hover的時候，我希望看到周邊的border高亮，
所以使用z-index 來調節層級顯示。至此大功告成。
五、浮動元素下負margin問題
文字和鏈接的問題
當浮動元素使用負margin時，在一些舊的瀏覽器中可能會出現問題，問題現象包括：
- 鏈接無法點擊;
- 文字難以選中；
- 失去焦點後，tab任何鏈接都會消失；
解決方法：給元素添加position:relative，便能正常運行！
圖片被截斷
如果你不幸在辦公室使用IE6的話，有時候會發現重疊和浮動的元素中內容會被突然截斷。
解決方法：同樣，給浮動元素加上position:relative，一切將會恢復正常。