黑马程序员技术交流社区

标题: 【成都校区】-- margin负值的作用 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-10-10 18:16
标题: 【成都校区】-- 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都可以增加宽度。
二、上下负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的后面，我也能让它显示在最前面。其实，圣杯布局，双飞翼布局都是利用这个原理实现的。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2