今天无意中看到了双飞燕，圣杯布局，发现里面主要是有用到一个负外边距，感觉挺神奇的这玩意
( ⊙ 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效果是一样的。
负的外边距的作用其实很强大，许多布局定位都可以使用负的外边距，具体的实现以后有时间在补充吧~~
待续…