今天無意中看到了雙飛燕，聖盃佈局，發現裏面主要是有用到一個負外邊距，感覺挺神奇的這玩意
( ⊙ o ⊙ )！看就了一些關於負外邊距的資料，這裏自己總簡單結一下。
參考網址：
http://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html
http://www.daqianduan.com/6239.html
負外邊距主要分爲在普通文檔流的作用效果和 對浮動元素的作用效果
對普通文檔流
- marin-left或者margin-top是負值：它會將元素在相應的方向進行移動。left就是左右方向移動，top就是上下方向移動。也就是會使元素在文檔流裏的位置發生變化。
- margin-right或者margin-bottom是負值：它不會移動該元素(該元素不變化)，但會使該元素後面的元素往前移動。也就是說，如果margin-bottom爲負值，那麼該元素下面的元素會網上移動；如果margin-right爲負值，那麼該元素右邊的元素會往左移動，從而覆蓋該元素。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px
}
#div1{
background-color: red;
width:100px;
height: 100px;
margin-bottom:-50px;
}
#div2{
height: 100px;
width:100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2"></div>
</body>
</html>效果如圖：
- 如果元素沒有設置寬度，那麼margin-left和margin-right取負值 ，會將元素左右拉長，我們可以看見寬度邊長了。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px
}
#div1{
width:400px;
height: 100px;
border:10px solid black;
}
#div3{
height: 100px;
margin-right: -100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div3"></div>
</div>
</body>
</html>效果見下圖：
顯然，div3的長度被拉長了100px。
對浮動元素
對於浮動元素來說，負外邊距的效果和普通文檔流類似，不過也有一些特殊的地方。】
和之前一樣，如果是設置left，top那麼該元素會移動，如果是bottom和right也會使後面的元素往前移動，遮蓋前面的元素。
如果有幾個相鄰的浮動元素，設置左右的負的外邊距，那麼右邊的浮動元素會向左覆蓋前面的浮動元素。並且，如果某個浮動元素是因爲窗口大小或者它前面的浮動元素的寬度，從而掉到下一行的話，那麼給他設置一個margin-left負值或者給她前面的元素設置一個margin-right負值，就會使得這個元素往上一行移動。（╮(╯_╰)╭就是從下面一行的左邊消失，從上一行的右邊出現，感覺挺神奇的）
例：
這是沒有設置負外邊距的時候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px
}
#div1{
width:2000px;
height: 100px;
background-color: yellow;
float: left;
}
#div2{
height: 100px;
width:100px;
background-color: red;
float:left;
/*margin-left: px;*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
現在給div2設置一個負的margin-left
#div2{
height: 100px;
width:100px;
background-color: red;
float:left;
margin-left: -100px;
}
從圖中可以發現div2消失了，也就是它向左移動了本身的寬度值後，在頁面上沒有顯示了，然後把margin-left設置爲-200px
效果如下：
可以發現div2跑到上面一行去了，以此類推…
注意：在這裏，給div1設置負的margin-right和給div2設置負的margin-left效果是一樣的。
負的外邊距的作用其實很強大，許多佈局定位都可以使用負的外邊距，具體的實現以後有時間在補充吧~~
待續…