欢迎使用CSDN-markdown编辑器

paopaomo_

于 2017-07-12 23:34:07 发布

阅读量182

点赞数

分类专栏：负margin 文章标签：负margin

本文链接：https://blog.csdn.net/sinat_39494847/article/details/75042324

版权

负margin 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

负margin的原理

负margin对由文档流控制的元素的作用

会使他们在文档流中的位置发生偏移，但这种偏移不同于相对位移，通过相对定位偏移后，其仍然会坚守着它本来占据的空间，不会让文档流的其他元素趁虚而入，而通过负margin进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其他元素就会“流”过来填充这部分空间。在文档流中，元素的最终边界是由margin决定的，margin为负时，就相当于元素的边界向里收，文档流认定的知识这个边界，不会管你实际的尺寸应该是多少。

左右的负margin对元素宽度的影响

原图：

输入图片说明

加了负margin后：
输入图片说明

html

<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>

css

<style type="text/css">
    .box{
        width:700px;
        height:200px;
        position:absolute;left:50%;margin-left:-350px;
    }
    .box1{
        height:200px;
        background-color:pink;
        margin-right:-100px;
        margin-left:-100px;
    }
</style>

注意：作用实现的前提：该元素没有设置width属性,当然，width：auto是可以的；

对该元素设置了margin-right：-100px；margin-left：100px；由图可知，它宽度的确变长了200px；

负margin对浮动元素的影响

原图：

输入图片说明

加了负margin-right=-50px：

输入图片说明

html

<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>

css


<style type="text/css">
    .container div{
        width:100px;
        height:100px;
        float:left;
        margin-right:-50px;
    }
    .container div:nth-of-type(1){background-color:pink;}
    .container div:nth-of-type(2){background-color:blue;}
    .container div:nth-of-type(3){background-color:orange;}
</style>

由图可知，给每个div设置margin-right：-50px后，后面的元素盖在了前面的元素上。

将container的宽度设置为250，即：使宽度不够，3号方块掉下来

输入图片说明

设置3号元素margin-left=-80px

输入图片说明

由图可知，2号元素被盖住了80px；

若设置3号元素margin-left=-100px

输入图片说明

由图可知，2号元素被完全盖住

若设置3号元素margin-left=-200px；

由图可知，1号元素被完全覆盖

综上可知，虽然某个元素写在了后面，但可以通过设置负边距让它在浏览器里显示在前面。这就是负边距对浮动元素的作用。

负margin的应用

去除列表右边框

效果

输入图片说明

html

<body>
<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>
</body>

css

<style type="text/css">
    body{
        margin:0;
    }
    ul{
        margin:0;
        padding:0;
    }
    li{
        list-style:none;
    }
    .container{
        width:460px;
        height:210px;
        border:5px solid #000;
        overflow:hidden;
     }
    ul{
        height:210px;
        overflow:hidden;
        margin-right:-20px;
    }
    li{
        width:100px;
        height:100px;
        background-color:blue;
        float:left;
        margin-right:20px;
        margin-bottom:10px;
    }
</style>

原理：给ul设置margin-right：-20px；增大ul的宽度。注意：需要给父元素（container）overflow：hidden；

水平垂直居中

效果：

输入图片说明

html

<body>
<div></div>
</body>

css

<style type="text/css">
    div{
        width:200px;
        height:200px;
        background-color:pink;
        position:absolute;left:50%;top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
</style>

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

原图：

输入图片说明

加上负margin后：

输入图片说明

html


<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

css


<style type="text/css">
    body{
        margin:0;
    }
    ul{
        margin:0;
        padding:0;
    }
    li{
        list-style:none;
    }
    ul{
        width:500px;
        background-color:pink;
        border:2px solid blue;
        position:absolute;left:50%;margin-left:-250px;top:20px;
        overflow:hidden;
    }
    li{
        height:30px;
        line-height:30px;
        border-bottom:1px solid #000;
        margin-bottom:-1px;
    }
</style>

注意：需要给ul设置overflow：hidden；

原理同上，即，给每个li设置margin-bottom：-1px；

多列等高

效果：

输入图片说明

html

<body>
<div class="wrap">
    <div class="left">
        <p style="height:50px">style="height:50px"</p>
    </div>
    <div class="center">
        <p style="height:100px">style="height:100px"</p>
    </div>
    <div class="right">
        <p style="height:200px">style="height:200px"</p>
    </div>
</div>
</body>

css

<style type="text/css">
    body,p{
        margin:0;
        padding:0;
    }
    .wrap{
        width:620px;
        margin:0 auto;
        overflow:hidden;
    }
    .left,.right,.center{
        margin-bottom:-200px;
        padding-bottom:200px;
    }
    .left{
        width:160px;
        float:left;
        background-color:pink;
    }
    .center{
        width:300px;
        float:left;
        background-color:blue;
    }
    .right{
        width:160px;
        float:right;
        background-color:orange;
    }
    p{
        color:#fff;
        text-align:center;
    }
</style>