margin負值的作用

一、左右負margin改變自身寬度

當元素不存在width或者width:auto的時候，負margin會增加元素的寬度。

html

<div class="parent">
  <div class="div1">111</div>
</div>

css

.div1{
background-color: red;
margin-right:-100px;
}
.parent{
  width:300px;
  background-color: yellow;
}

效果圖

 

可以看到，div1多出了100px的寬度，正是因為加了負的margin。事實上，margin-left和margin-right都可以增加寬度。

2、上下負margin對文檔流的影響

當我們給一個元素設置負邊距時，比如margin-top:20px，會使這個元素向上偏移20px的距離，不同於相對定位保存原來的物理空間，他會放棄偏移之前占據的空間，這樣他后面的文檔流就會流過來填充這部分空間。

html

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

css

.div1,.div2,.div3{
  width: 100px;
  height:100px;
}
.div1{
  background-color: red;
}
.div2{
  background-color: yellow;
}
.div3{
  background-color: green;
}

效果圖

當我們在div2上加上margin-top:-50px，時，效果圖如下：

 

margin-bottom負值不會產生位移，但是會減少自身供css讀取的高度。

html

<div class="div1">111</div>

css

.div1{
  width: 100px;
  height:100px;
  background-color: red;
  margin-bottom: -50px;
}

效果圖

如圖所示，左側是div的實際高度，右側是css能讀到的高度。

3. 可以使改變浮動元素的顯示位置

html

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

css

.div1,.div2,.div3{
  width: 100px;
  height:100px;
  float: left;
}
.div1{
  background-color: rgba(255,0,0,0.6);
}
.div2{
  background-color: rgba(255,255,0,0.6);
  margin-left: -20px;
}
.div3{
  background-color: rgba(0,128,0,0.6);
  margin-left: -20px;
}

效果圖

負的margin會改變浮動元素的顯示位置，即使元素寫在dom的后面，我也能讓它顯示在最前面。其實，聖杯布局，雙飛翼布局都是利用這個原理實現的。

參考：http://www.jianshu.com/p/549aaa5fabaa

　　http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812