负边距布局

Posted 2020-07-20 迷失地

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了负边距布局相关的知识，希望对你有一定的参考价值。

时间--2016-06-03
知识点：
margin的负值会让盒子的宽高都相应的变大。
margin的负值会让出相应的位置。例如本文的案例中margin-right:-300px，这个盒子就会让出右边的宽度为300px的一个空间，后面的元素浮动的话就会占据他让出的空间。

本文只是个人理解，如有不妥敬请指正。

案例：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100%;
            overflow: hidden;
        }
        .left{
            float: left;
            width: 100px;
            height: 300px;
            background: red;
        }
        #content{
            float: left;
            width: 100%;
            height: 400px;
            background: pink;
            margin-right: -300px;/*负边距让这个盒子变宽*/
        }
        #content div{
            margin-right: 300px;/*让这个盒子和父元素的右边有300像素的距离，其中300=左边的div宽度（100） + 右边div的宽度（200）*/
        }
        #side{
            float: left;
            background: peru;
            width: 200px;
            height: 300px;
        }



        .wrap2{
            width:320px;
            border:dashed 1px orange;
        }

        .wrap2 .inner{
            overflow:hidden;
            margin-left:-10px;
        }

        .wrap2 .item{
            float:left;
            width:100px;
            height:100px;
            margin:10px 0px 10px 10px;
            background:blue;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="left"></div>
    <div id="content">
        <div>
            如果将元素的box-sizing属性设置为"border-box"，则width和height表示的是内容、内边距和边框组成区域的高度和宽度。所以增加外边距对内容区域的尺寸没有影响，而增加内边距和边框会导致内容区域的尺寸减小。
            现在开始讨论第一个问题：外边距叠加
            外边距叠加是指当两个或更多垂直外边距相遇时，外边距的高度等于这几个外边距的高度中的较大者。这就是外边距叠加的情况，并且外边距叠加只发生在垂直外边距上。
        </div>
    </div>
    <div id="side"></div>
</div>

<div class="wrap2">
    <div class="inner">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

</body>
</html>

以上是关于负边距布局的主要内容，如果未能解决你的问题，请参考以下文章