margin为负值所产生的影响

作者: 埃米莉Emily | 来源:发表于2017-08-09 23:02 被阅读30次

margin为负值所产生的影响
css 负边距
css杂项
margin为负值产生的影响和常见布局应用
前端记录20171208
margin为负值的拓展
margin为负值的分析
margin为负值的规则
margin负值
task 12

一、margin为负值产生的影响

对于自身的影响

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

<div class="container">
  <div class="box1">
         I dont have the width
    </div>
</div>

.container{
  margin:0 auto;
  width: 500px;
  border: 1px #ccc solid;
  margin-bottom: 20px;
  background-color: pink;
}
.box1{
  margin-left: -20px;
}

self.png

可以看到box1增加了20px宽度，margin-left和margin-right都是可以增加宽度。

注意：
margin-top为负值不会增加高度，只会产生向上位移
margin-bottom为负值不会产生位移，会减少自身的供css读取的高度

什么是供css读取的高度？

<style>
    #box {
        width: 50%;
        margin-bottom: -25px;
        background-color: rgba(90, 243, 151, 0.8);
        height: 50px;
    }
    </style>
    <div id="box">
        box
    </div>
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
    <script>
    var x = $('#box').height()
    console.log(x);
    </script>

css_height.png

对文档流的影响

元素如果用了margin-left:-20px;毋庸置疑的自身会向左偏移20px和定位（position：relative）有点不一样的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。总结，不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流。

对浮动元素的影响

定义3个box

<div class="container">
    <div class="flb flbox1">box1</div>
    <div class="flb flbox2">box2</div>
    <div class="flb flbox3">box3</div>
</div>

.flb{
    float: left;
    width: 100px;
    height: 100px;
}
.flbox1{background-color: rgba(33, 114, 214, 0.8);}
.flbox2{background-color: rgba(255, 82, 0, 0.8);}
.flbox3{background-color: rgba(90, 243, 151, 0.8);}

float.png

加上margin-left:-25px;

.flb{
    float: left;
    width: 100px;
    height: 100px;
    margin-left: -25px;
}
.flbox1{background-color: rgba(33, 114, 214, 0.8);}
.flbox2{background-color: rgba(255, 82, 0, 0.8);}
.flbox3{background-color: rgba(90, 243, 151, 0.8);}

add_margin.png

可以看出3个盒子都向左移动25px；
box1自身向左移动了25px，box2又覆盖了其25px，所以我们就看到了“宽度”为50px的box1，box2，box3以此类推。

负margin会改变浮动元素的显示位置。

对绝对定位影响

<div class="absolute"></div>

.absolute{
    position: absolute;
    top:50%;
    left:50%;
    height: 200px;
    width: 200px;
    background-color: #ccc;
    margin-top: -100px;
    margin-left: -100px;
}

一个居中的box.png

对于绝对定位元素，负margin会基于其绝对定位坐标再偏移

二、margin为负值的常见布局应用

左右固定，中间自适应（双飞翼）

双飞翼的好处：
1.可以让主要内容出现在dom结构的前面，现将主要内容渲染
2.中间只适应，两边固定宽度的效果

双飞翼.png

<div class="main">
   <div class="main-content">main content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

*{
     margin:0;
     padding: 0
 }
 .main{
     float: left;
     width: 100%;
 }
 .main .main-content{
     margin: 0 210px;
     background-color: rgba(33, 114, 214, 0.8);
     height: 500px
 }
 .left{
     width: 200px;
     float: left;
     background-color: rgba(255, 82, 0, 0.8);
     margin-left: -100%; 
     height: 200px
  }
  .right{
      width: 200px;
      height: 200px;
      margin-left: -200px;
      float: left;
      background-color: rgba(90, 243, 151, 0.8);
  }

去除列表最后一个li元素的border-bottom

很多情况下，我们会用li标签来模拟表格，再给li标签添加下边距的时候，最后一个li标签表格会和父元素的边框靠在一起，会显得整个“table”的底部边框会比其他的边粗一些！

<style>
    ul.table{
        border:1px #ccc solid;
        margin-top:100px;
    }
    ul.table li{
        border-bottom: 1px #ccc solid;
        list-style: none;
    }
    </style>
    <ul class="table"> 
        <li>I am li</li>
        <li>I am li</li>
        <li>I am li</li>
        <li>I am li</li>
        <li>I am li</li>
    </ul>

border.png

下面添加一个margin-bottom:-1px;的属性,就可以使其看起来更完美。

<style>
    ul.table{
        border:1px #ccc solid;
        margin-top:100px;
    }
    ul.table li{
        border-bottom: 1px #ccc solid;
        list-style: none;
        margin-bottom: -1px;
    }
    </style>
    <ul class="table"> 
        <li>I am li</li>
        <li>I am li</li>
        <li>I am li</li>
        <li>I am li</li>
        <li>I am li</li>
    </ul>

add_margin.png

多列等高

<style>
    .container{
        margin:0 auto;
        width: 100%;
        overflow: hidden;
    }
    .left{
        height: 50px;
        width: 33.33%;
        margin-bottom: -5000px;
        padding-bottom: 5000px;
        float: left;
        background-color: rgba(33, 114, 214, 0.8);
    }
    .main{
        height:100px;
        margin-bottom: -5000px;
        width: 33.33%;
        float: left;
        padding-bottom: 5000px;
        background-color: rgba(255, 82, 0, 0.8);
    }
    .right{
        width: 33.33%;
        float: left;
        margin-bottom: -5000px;
        padding-bottom: 5000px;
        background-color: rgba(90, 243, 151, 0.8)
    }
</style>
<div class="container">
    <div class="left"> height:50px</div>
    <div class="main">height:100px</div>
    <div class="right">height:30px</div>
</div>