margin 负值 理论

当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移

当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。

负边距在普通文档流中的作用和效果(margin-bottom负值，减少高度)

那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。

通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间.设一个负边距 margin:-10px; 

黑灰色的块状元素好像向左和向上都分别嵌入了浏览器窗口的边界里10px,然后块状元素下面的文字也爬到了它身上

比如，一个没有设定高度的块状元素，其高度是自动的，具体来说就是由它里面的文档流最后的位置决定的。假设它里面有一个出于文档流中的子元素，高度为100px;那这时这个父元素的高度就等于子元素的高度100px了，如果子元素继续增高，那么父元素也会跟着增高。可是如果这时子元素设一个负的margin-bottom,比如-20px，因为负边距会影响到文档流，本来文档流的高度是从父元素的最顶端到子元素的最底端这段高度，现在子元素有一个margin-bottom:-20px;就相当于文档流要向上退后20px,这样整个文档流的高度就减少了20px了，那么父元素的高度也会跟着减少20px。在IE8+以及那些标准浏览器中，这还需要父元素拥有一个overflow:hidden的属性，因为父元素的高度变了，但子元素的高度并没有变，所以需要使子元素超出隐藏，但即使不设置overflow:hidden，父元素的高度也是变小了的，只不过这时子元素的高度会超出父元素

左和右的负边距对元素宽度的影响（margin-right 负值 没有设置宽度的情况，增加宽度。）

负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度！

这个作用能实现的前提是：该元素没有设定width属性（当然width:auto是可以的）

比如下图的黑灰色部分是一个块状元素，它没有设定宽度。它被包裹在一个宽度为400px,且水平居中的父元素中

现在给这个元素的设一个margin-right:-100px;我们看到它的宽度的确变长100px

那这货有什么用途呢？我就举一个例子吧

想要创建上图中黑框内的几个元素按顺序排下来，中间带些间隔的布局要怎么做？，当然最简单省事的方法就是利用浮动了。我们把黑框里面的子元素向左浮动，然后设一个合适的margin-right,是不是就办到了呢？但因为外边黑框的宽度是固定的，就是里面四个子元素的宽度加上三列间隔的宽度，所以靠近右边边界的子元素就不应该有正向的margin-right了，否则这一行就只能容纳三个子元素了。有人说那这还不简单，给靠近右边界的那些子元素加一个class，把它的margin-right设为0不就行了。这当然可以，但如果这些子元素是在模板中通过循环动态输出的，那在循环的时候还得判断哪些子元素是靠近右边边界的，如果是就加上一个class。这样做的话是不是就有点麻烦了？所以解决办法是加大子元素的父容器的宽度，让它能够容纳一行中有四个子元素加上四列间隔的宽度，然后最外面的的黑框的那个容器设一个overflow:hidden就行了。上面说了负的左右边距能加大元素的宽度，所以给子元素的父容器设一个合适的负的margin-right就可以了。当然你也可以直接在css中把子元素的父容器的宽度设宽一些，举这个例子只是为了说明负边距也是一种方法。看下完整的代码：

< style >

body,ul,li{ padding:0; margin:0;}

ul,li{ list-style:none;}

.container{ height:210px; width:460px; border:5px solid #000;}

ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一个负的margin-right,相当于把ul的宽度增加了20px*/

li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}

</ style >

< div  class="container">

     < ul >

         < li >子元素1</ li >

         < li >子元素2</ li >

         < li >子元素3</ li >

         < li >子元素4</ li >

         < li >子元素5</ li >

         < li >子元素6</ li >

         < li >子元素7</ li >

         < li >子元素8</ li >

     </ ul >

</ div >

负边距对浮动元素的影响（margin-left负值：覆盖）

三个向左浮动的元素，宽高都是100px：设置元素3margin-left：负值的变化。也可以尝试元素2上面设置margin-left。会发现，元素3跟着元素2向左移动，但是当元素3靠近元素1后，就不会往左移动，浮动的原因。

我们把浏览器缩小了，然后因为宽度不够，元素3掉下来了

我们给元素3设一个margin-left:-80px;看看会怎么样。这时我们看到元素3上去了，而且还覆盖了元素2的一部分。继

续元素3设为margin-left:-100px，这时元素3完全覆盖住了元素2

当元素3设为：margin-left:-200px时，看到元素3继续向左移动并覆盖住了元素1。

负边距对绝对定位元素的影响：元素的居中

绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。利用这点，就有了经典的利用绝对定位来居中的方法：

但该方法的缺点是必须要知道要居中元素的高度和宽度