margin为负值所产生的影响

2017-08-09  本文已影响30人  埃米莉Emily

一、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>
多列等高.png

虽然设置了5000的内边距,但是我用-5000的外边距去抵消掉,所以对于父元素来说(上文所说的css能读取的高度),他还是原来的高度(但其自身实际高度为5000p x+本来高度),然后父元素在加上overflow:hidden;以最高的高度进行裁切,所以就有了看起来“等高”的3个div。

来源:margin为负值产生的影响和常见布局应用

上一篇 下一篇

猜你喜欢

热点阅读