CSS学习笔记——margin

一、margin

入门css时，大部分人都是从css盒模型中的各个属性开始学习的。盒模型属性中有一margin元素。margin：盒子周围的透明区域，它会将其他元素从盒子内容中推开。

CSS1中规范了margin的四种属性：margin-top、margin-right、margin-bottom、margin-left。

二、margin重叠

CSS1规范了定义了margin以及垂直margin重叠。当两个margin发生重叠时，它们将组合在一起，两个元素之间空间取较大的一个。较小的margin在较大的里面。

发生margin重叠的场景：

1、相邻的兄弟姐妹

2、完全空盒子

3、父元素和第一个或最后一个子元素

相邻的兄弟姐妹

margin重叠最初描述的是演示相邻兄弟姐妹之间的margin如何重叠。

<div class="wrapper">
    <div class="box demo1">margin: 50px 0 50px 0;</div>
    <div class="box demo2">margin: 20px 0 20px 0;</div>
    <div class="box demo3">margin: 3em 0 3em 0;</div>
</div>

        .wrapper {
            border: 5px dotted black;
        }
        .demo1 {
            margin: 50px 0 50px 0;
        }
        .demo2 {
            margin: 20px 0 20px 0;
        }
        .demo3 {
            margin: 3em 0 3em 0;
        }
        body {
            margin: 2em 3em;
        }
        .box {
            background-color: darkorange;
            color: white;
            padding: 20px;
            border-radius: .5em;
        }

如上代码以及运行效果图所示，上述代码有三个div元素。第一个div的顶部和底部的margin都是50px。第二个div的顶部和底部margin都是20px。第三个div的顶部和底部margin都是3em。前两个元素之间margin是50px，第二个元素与第三个元素之间的margin是3em。

完全空盒子

若一个盒子是空的，那么它的顶部和底部margin可能会相互重叠。

<div class="wrapper">
      <div class="box">A box</div>
        <div class="box empty"></div>
        <div class="box">Another box</div>
    </div>

        .wrapper {
            border: 5px dotted black;
        }
        body {
            margin: 2em 3em;
        }
        .box {
            background-color: darkorange;
            color: white;
            /*padding: 20px;*/
            border-radius: .5em;
        }
        .empty {
            margin: 50px 0 50px 0;
        }

如上所示，class为empty的元素的顶部和底部margin各位50px。但是，第一项和第三项之间的margin不是100px，而是50px。这时由于两个margin重叠造成的。如果向空盒子中放入内容就会阻止margin合并。

父元素和第一个或最后一个子元素

margin重叠让人猝不及防，因为它有时候并不是很直观。在以下实例中，有一个类名为wrapper的div，给div一个红色的outline，这样就可以看到他在哪里了。

<div class="wrapper">
    <div class="box">
       Item1
    </div>
    <div class="box">
       Item2
    </div>
    <div class="box">
       Item3
    </div>

       .wrapper {
            /*border: 5px dotted black;*/
            outline: 1px solid red;
        }
        body {
            margin: 2em 3em;
        }
        .box {
            margin: 50px;
        }
        body {
            margin: 2em 3em;
        }
        .box {
            background-color: darkorange;
            color: white;
            padding: 20px;
            border-radius: .5em;
        }

这个div里面的三个元素的margin都是50px。但是你会发现实际效果是第一项和最后一项与父元素的margin齐平，好像子元素和父元素的之间没有50px的margin一样。这是因为子节点上的margin会随着父节点上任何一边的margin相互重叠，从而最终位于父节点的外部。

注意：仅块元素margin重叠。在CSS2中，只指定垂直方向margin重叠，即元素的顶部和底部margin。因此，上面的左右边距不会重叠。margin只在块的方向上重叠，比如段落之间。

三、预防margin重叠

如果一个元素是绝对的定位，或者是浮动的，那么它的margin永远不会重叠。

创建格式化上下文（BFC）

BFC格式化上下文，是web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。BFC可以阻止边距的重叠。如果我们再看父元素和第一个或最后一个子元素的示例，可以在wrapper元素上加上display:flow-root就会创建一个新的BFC，从而阻止margin合并。

display：flow-root是CSS3新出来的一个属性，用来创建一个副作用的BFC。将overflow属性设置为auto也会产生同样的效果。

 .wrapper {
            /*border: 5px dotted black;*/
            display: flow-root;
            outline: 1px solid red;
        }

flex和grid容器

flex和grid容器为其子元素建立flex和grid格式化上下文，因此他们也能阻止margin的重叠。

 .wrapper {
            /*border: 5px dotted black;*/
            /*display: flow-root;*/
            display: flex;
            flex-direction: column;
            outline: 1px solid red;
        }