一、左右负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都可以增加宽度。
二、上下负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能读到的高度。
三、 可以使改变浮动元素的显示位置
[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的后面,我也能让它显示在最前面。其实,圣杯布局,双飞翼布局都是利用这个原理实现的。
|