A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

一、左右负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的后面,我也能让它显示在最前面。其实,圣杯布局,双飞翼布局都是利用这个原理实现的。




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马