margin负值对布局的影响

在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。

在文档流中，如果元素前面的元素设置了负margin,则他会以流的形式跟上去。所以将元素都设置负margin后，就会产生覆盖。

margin设置移动时的参考：margin的参考线有两类，一类是top、left，它们以外元素作为参考线，使自己移动。另一类是right、bottom，它们以自身作为参考线。让兄弟元素移动

总地来说，就是当margin-top、left为负值的时候与参考线的距离减少，当margin-right、bottom为负值的时候参考线（不是本身，是相隔的那个）就向左、上面移动。

网络异常，图片无法展示

表现

虽然margin可以应用到所有元素，但display属性不同时，表现也不同

block元素可以使用四个方向的margin值

inline元素使用上下方向的margin值无效

<style>
    * {
      margin: 0;
      padding: 0;
    }
    span {
      border: 1px solid black;
      margin: 100px;
    }
  </style>
  <span>inline上下的margin是无效的</span>

inline-block使用上下方向的margin负值看上去无效

其中只是vertical-align:baseline / bottom是无效的，top / middle是有效的

<style>
  * {
      margin: 0;
      padding: 0;
    }
    input {
      margin-top: -100px;
      vertical-align: bottom;
    }
  </style>
  <input type="text" value="inline-block的上下margin负值是无效果的">

　　　　[注意]inline-block使用上下方向的margin负值只是看上去无效，这与其默认的vertical-align:baseline有关系，当垂直对齐的属性值为其他值时，则会显示不同的视觉效果

重叠

margin负值并不总是后面元素覆盖前面元素，它与元素display属性有关系

两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容

* {
      padding: 0;
      margin: 0;
    }
    .top {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
    .bot {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: -100px;
    }
  </style>
  //这里的top不会被覆盖
  <div class="top">top</div>
  <div class="bot"></div>

当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容

.st {
      background-color: yellow;
      opacity: .8;
    }
    .sb {
      background-color: blue;
      margin-left: -30px;
      opacity: .8;
    }
  </style>
  <div class="top">top</div>
  <div class="bot"></div>
  <span class="st">sttttttttttttttttt</span>
  <span class="sb">sbssssssssssssssssssss</span>

当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话，后面的元素覆盖前面的元素

<style>
    span {
      background: red;
      margin-left: -5px;
    }
    div {
      background: blue;
      width: 100px;
      float: left;
      height: 100px;
    }
  </style>
  //浮动后span元素会在div后面，加上margin-left负值后，span覆盖div的内容和背景
  <span>我是内联元素</span>
  <div>我是块级元素</div>

综上所述，个人理解，在普通流布局中，浏览器将页面布局分为内容和背景，内容的层叠显示始终高于背景。block元素分为内容和背景，而inline元素或inline-block元素，它本身就是内容(包括其背景等样式设置)

当元素都浮动时

全部设置margin负值时，会正常移动元素，但是相互浮动的元素会覆盖一部分浮动的元素

这里并不是我们想的那样，如果将若干元素都设置同样的margin，他们都移动相同的距离，但是还是会相互遮盖

<style>
    div {
      border: 1px solid black;
      margin-top: -50px;
      width: 200px;
      height: 200px;
    }
  </style>
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>

如果只给浮动元素的一个元素加负的margin，则他会向内联一样

<style>
    div {
      float: left;
      width: 100px;
      height: 100px;
      background: red;
    }
    div:nth-child(1) {
      background: blue;
    }
    div:nth-child(2) {
      background: green;
      margin-left: -10px;
    }
  </style>
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>

定位元素

对于相对定位，通过margin的值偏移，该元素原来的位置会空出来，但是通过left等偏移，该元素原来的位置依然存在

但是绝对定位元素就不同了，他将所有定位元素都加上一样的负margin，那么将是整体移动，不会彼此遮盖

网络异常，图片无法展示

```
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      border: 1px solid black;
      position: absolute;
      width: 200px;
      height: 200px;
    }
    .box2 {
      left: 200px;
      margin-left: -100px;
    }
    .box3 {
      left: 400px;
      margin-left: -100px;
    }
  </style>
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
```

对自身的影响

当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度。

<style>
    .container {
      margin: 0 auto;
      width: 500px;
      border: 1px #ccc solid;
      margin-bottom: 20px;
    }
    .box1 {
      margin-left: -20px;
      /* margin-bottom: -100px; */
    }
  </style>
  <div class="container">
    //box1不设置宽度或者width: auto;这样设置margin负值就可以增加他的宽度
    <div class="box1">
      I dont have the width
    </div>
  </div>

对内联元素

如果只改变一个内联元素的margin为负值，紧跟其后的所有连续的内联元素，也会移动，不会改变布局

<style>
    * {
      margin: 0;
    }
    .box2 {
      margin-left: -20px;
      background: red;
    }
    span {
      border: 1px solid black;
    }
  </style>
  <span class="box1">1111</span>
  <span class="box2">2222</span>
  <!-- <div>0000</div> -->
  <span class="box3">3333</span>

双飞翼布局

将中间的布局放在最前面,因为我们利用margin负值会覆盖他前面的元素，而中间的元素宽度最大，刚好被覆盖。

左边的布局margin-left： -100%；

右边的布局marfin-left： -自身宽度

将中间元素用一个div包裹，使中间内容不被覆盖，设置子元素margin，来撑开与父元素的距离则可以做到。

<style>
    * {
      padding: 0;
      margin: 0;
    }
    .content {
      margin: 10px;
    }
    .left {
      width: 300px;
      height: 200px;
      float: left;
      background: red;
      margin-left: -100%;
    }
    .middle {
      height: 200px;
      background: blue;
      /* 这个表示距离父元素的距离 */
      margin: 0 310px;
    }
    .content-main {
      width: 100%;
      float: left;
    }
    .right {
      width: 300px;
      height: 200px;
      float: left;
      background: skyblue;
      margin-left: -300px;
    }
  </style>
 <div class="content">
    <div class="content-main">
      <div class="middle"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>

圣杯布局

布局和双飞翼相同，但是避免中间的元素内容被覆盖，需要设置padding来使内容在中间显示，而不被覆盖。

<style>
    * {
      margin: 0;
      padding: 0;
    }
    /* .content {
      padding: 0 310px;
    } */
    .left {
      width: 300px;
      height: 200px;
      float: left;
      background: red;
      margin-left: -100%;
      /* position: relative;
      left: -310px; */
    }
    .middle {
      width: 100%;
      height: 200px;
      float: left;
      box-sizing: border-box;
      padding: 0 310px 0 310px;
      background: blue;
    }
    .right {
      width: 300px;
      height: 200px;
      float: left;
      background: skyblue;
      margin-left: -300px;
      /* position: relative;
      right: -310px; */
    }
  </style>
  <div class="content">
    <div class="middle">333333333333</div>
    <div class="left"></div>
    <div class="right"></div>
  </div>

圣杯和双飞翼异同

圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

两种方法基本思路都相同：首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。

主要区别在于 如何使中间盒子的内容不被左右盒子遮挡：

圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；

双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。

简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。

等高布局

利用flex

利用table-cell，将每一列都设置display：table-cell；但是有关table的都不可以设置margin属性

利用margin-bottom负值和padding-bottom正值

margin-bottom负值是让父元素可以在子元素下边距之上，可以让padding-bottom增加的内容溢出。然后在使用overflow：hidden来将其隐藏。

padding-bottom正值是增加子元素的内容高度，来弥补margin-bottom负值引起的父元素在子元素之上。并且视觉上仍然可以显示子元素内容高度增加。

盒子模型的经典问题

margin叠加问题：

兄弟元素之间设置的margin-top,margin-bottom，如果有一个设置为负margin,那么它会把正值和负值计算后的值设置为margin，如果两个值都是负值，那么取那个较小的负值。

父子元素的叠加，由于子元素的margin-top,margin-bottom会传递给父元素，就会与父元素自己设置的margin进行叠加成一个较大的margin，忽略那个较小的margin值

margin传递问题

margin-top的传递。如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素。如果顶部不重叠就不会出现这种情况

<style>
    div:nth-child(1) {
      background: red;
      width: 100px;
      height: 100px;
      margin-bottom: -20px;
      overflow: hidden;
    }
    div:nth-child(2) {
      background: blue;
      width: 100px;
      height: 100px;
      margin-top: -10px;
      opacity: 0.5;
    }
  </style>
  //间距为-20px
  <div>1</div>
  <div>2</div>

margin-bottom的传递。如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素。

解决方法：

给父元素设置padding-top\padding-bottom

给父元素设置border

触发BFC，给父元素设置overflow: auto / hidden / scroll

一般来讲：margin一般是用来设置兄弟元素之间的间距。

padding一般是设置父子元素之间的间距。

前端复习-----css, html篇(上)

margin负值对布局的影响

表现

重叠

当元素都浮动时

定位元素

对自身的影响

对内联元素

双飞翼布局

圣杯布局

圣杯和双飞翼异同

等高布局

盒子模型的经典问题

margin叠加问题：

margin传递问题

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

前端复习-----css, html篇(上)

margin负值对布局的影响

表现

重叠

当元素都浮动时

定位元素

对自身的影响

对内联元素

双飞翼布局

圣杯布局

圣杯和双飞翼异同

等高布局

盒子模型的经典问题

margin叠加问题：

margin传递问题

热门文章

最新文章

相关课程

相关电子书

相关实验场景