margin负值的作用

Posted 2020-10-13 Anita_meng

一、左右负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