margin相关-外边距折叠

简介

1 .块的margin-top,margin-bottom有时合并折叠为2单个边距，大小是单个边距的最大值，这就是边距折叠。两个或者多个毗邻的普通流中的盒子,可能是父子元素，可能是兄弟元素，在垂直方向上的外边距会发生叠加
2 .注意左右边距是不会折叠的
3 .单个元素不会出现外边距叠加的情况
4 .毗邻：没有被padding，border,clear或line box隔开
5 .普通流：只要不是float,absolute和root element时就是普通流。或者说还发现了一个就是float的优势，不会出现上边距折叠
6 .display:flex之后也不会出现边距折叠情况

section    {
            margin-top: 13px;
            margin-bottom: 87px;
        }
    
        header {
            margin-top: 87px;
        }
    
        footer {
            margin-bottom: 13px;
        }

<section>
        <header>上边界重叠 87</header>
        <main></main>
        <footer>下边界重叠 87 不能再高了</footer>
    </section>
//我们想要的sectionmargin-top:13,然后他里面的header在section的基础上在margin-top:87.实际上section的margin-top表现出来的是87

出现外边距折叠的意义

1 .首先这不是bug，不能把任何出乎自己意料或者自己无法理解的现象叫做bug
2 .css世界的css属性是为了更好的进行图文信息展示而设计的，博客文章或者新闻信息是图文信息的典型代表，h2,h3,p,ul，这些全部都是有默认的垂直margin值的，单位全都是em。
3 .有了margin值，我们的文章，新闻就不会挤在一起，垂直方向就会层次分明，段落有致。使用em作为单位，em是相对单位，可以让我们的文章或者新闻无论多大的字体都排版良好
4 .我们平时做开发的时候都会重置各种默认的margin尺寸。但是这是一件需要审视的事情
5 .对于兄弟元素的margin合并其作用和em类似，都是让图文信息的排版更加舒服自然。如果没有margin合并，连续段落或者列表之类首尾项间距会和其他兄弟标签成1:2的关系，文章标题距离顶部很精，而和下面的文章详情内容距离很开。合并机制可以保证元素上下间距一致，无论是h2这种超大margin元素还是p元素，因为正正取大值.

<h1>111</h1>
<h2>222</h2>
<p>3333</p>
<p>3333</p>


//默认h1的margin是0.67em|font-size:2em,h2的margin是0.83em|font-size:1.5em
//那么这俩的margin其实是0.67+0.83，但是合并margin之后其实是取的h1的margin，两个p的margin都是16，合起来应该是31，但是实际合并之后是16

6 .父子合并的意义在于：在页面的任何地方嵌套或放入空div，都不会影响原来的块状布局

1 .div是网页布局中一个非常常见的元素，他的语义就是没有语义，也就是不代表任何特定类型的内容，是一个通用性的具有流体特性的容器。所以从行为表现上来看，一个纯粹的div元素是不能够也不可以影响原先的布局的。
2 .如果在一个原有的div外面嵌套了一个新的div，那么这个新的div阻隔了原有的兄弟margin合并，那么间距就会变大，妥妥的影响了原来的布局
3 .所以就有了父子margin合并，这样外面在嵌套一层div就跟没有嵌套一样，子元素的margin-top值就像设置在最外面的，新加的div上面一样

7 .自身合并margin的意义:可以避免不小心遗落或生成的空白标签影响排版和布局

demo1 
<p>第一行</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>最后一行</p>

demo2
<p>第一行</p>
<p>最后一行</p>
//要保证这俩的视觉效果是一样的,如果自身margin没有合并的话，上面第一行和最后一行将会有很大的空格

避免折叠

1 .设置float,position:absolute的元素不会产生折叠行为

合并场景1：相邻兄弟元素合并

1 .两个相同的p元素.如果后一个p加上了清除浮动，那么就不会重叠
2 .第一个p的margin-bottom和第一个p的margin-top合并了

合并场景2：父级元素和第一个/最后一个子元素

1 .父元素可能margin是0，子元素是margin100,这种合并是父元素没有出力，子元素出了全部的力量。然后最终的margin全部都合并到了父元素上
2 .阻止margin-top合并(以下操作任意一个都可以)

1 .父元素设置为块状化格式上下文
2 .父元素设置border-top
3 .父元素设置padding-top
4 .父元素和第一个子元素之间添加内联元素并且进行分隔

3 .阻止margin-bottom合并

1 .父元素设置块级格式化上下文元素 overflow:hidden。这个属性可以让父级元素块状化
2 .父元素设置border-bottom
3 .父元素设置padding-bottom
4 .父元素和最后一个子元素之间添加内联元素并且进行分隔
5 .父元素设置height,min-height或max-height

合并场景3 空块级元素的margin合并

1 .这个应该遇到的不多吧.设置了空，还要他干啥

.father{
            overflow: hidden;
        }
        .son{
            margin:10px 0;
        }

<div class="father">
       <div class="son">

       </div>
</div>
//理想是father高度是20px的，因为里面的son的margin是20px,但是实际上确实10，理由就是son里面的margin-top，margin-bottom做了合并.

2 .以下的合并流程

p{margin:10px 0px}

p
div
p
//实际上两个p之间的距离还是10px
上p的margin-bottpm和div的margin-top合并
下p的margin-top和div的margin-bottom合并
由于自己是空div，所以合并之后的margin-top,margin-bottom会在进行一次合并

3 .不常出现的原因

1 .很少会放置空div
2 .空div一般也是用来画线，会使用border属性，正好可以阻断margin合并
3 .一般都是会设置margin-top,margin-bottom的一个，不会两个一起开工

margin合并计算的规则

1 .正正取大：

1 .相邻兄弟合并，margin-top和margin-bottom之间取比较大的值
2 .父子合并，两个margin-top取大的那个
3 .自身合并，自己的margin-top,margin-bottom，取大的那个值

2 .正负值相加

1 .相邻兄弟合并，-20+50=30px，不会一般应该不会需要设负值吧。后面注意下吧
2 .父子合并：也是
3 .自身合并:也是

3 .负负取大值

1 . 相邻兄弟：-50，-30。最后结果是-50
2 .父子合并：一样
3 .自身合并：一样