CSS外边距属性，深刻理解margin

margin

See the Pen margin by wmui (@wmui) on CodePen.

该属性用于设置元素的外边距，外边距是透明的，默认值0。这是一个简写属性，属性值最多为4个，例如margin: 10px 15px 10px 15px，分别表示上外边距、右外边距、下外边距、左外边距。属性值也能够是3个，例如margin: 10px 15px 10px，表示上外边距、左右外边距、下外边距。属性值能够为2个，例如margin: 10px 15px，表示上下外边距、左右外边距。属性值能够为1个，例如margin: 10px，表示四边外边距。外边距也能够单独设置，margin-top上外边距，margin-right右外边距，margin-bottom下外边距，margin-left作外边距。属性值能够是auto，浏览器自动计算外边距，块级元素会水平居中显示，如例1，至于为什么水平方向居中，垂直方向未居中，这个下面细说。属性值能够是百分比，百分比是基于父元素的宽度计算的，在例2中为子元素设置了margin: 50%。属性值能够是CSS长度单位，值能够是负值。属性值能够是inherit。

外边距叠加

说明：普通文档流中，垂直排列的两个块级盒子（非父子），他们的上外边距或者下外边距会出现叠加，会以二者中外边距较大的那个为准，左右外边距不会叠加。

状况一：上面的例3和例4演示了这个现象，例3margin: 50px，例4margin: 30px，最后两个盒子之间的距离为50px，要想发生叠加须要知足如下条件：

1.只发生在块级元素且是普通流（inline-block元素不会叠加）
2.只发生在垂直方向上

状况二：上面的例2中父子嵌套的两个盒子，父元素和第一个子元素或最后一个子元素也会发生叠加效果，在例2中大盒子的外边距默认为0，而里面的小盒子上外边距50%（即100px），最终两个盒子的上外边距都是100px，父子嵌套的盒子须要知足如下条件才会发生外边距叠加：

1. 父元素非BFC元素
   
2. 父元素没有padding-top值
   
3. 父元素没有border-top值
   
4. 父元素和第一个子元素间没有inline元素间隔

细心观察发现下外边距没有发生叠加，margin-bottom发生叠加须要知足另外一个条件，上面的第四条改成：父元素和最后一个子元素之间没有inline元素分隔，以及父元素没有height、min-height、max-height限制。

状况三：若是一个盒子没有任何内容也没有高度，这个盒子真身也会出现外边距叠加，例如：

<div style="margin: 30px 0;"></div>

这个盒子的上下边距最终是30px，须要知足如下条件空盒子才会发生叠加：

1.没有border
2.没有padding
3.没有内容和高度

margin: auto没法实现垂直居中

拿例1先说，为何能实现水平居中？这是由于子盒子是一个块级元素，它的宽度默认是等于父盒子的宽度，因而子盒子和父盒子之间就有了联系，当给子盒子固定宽度后，margin: auto能平分剩余空间

在垂直方向上，子盒子的初始高度是不肯定的，它是根据内容的高度撑开的，这样父盒子和子盒子就没法创建联系，因此margin: auto在垂直方向上会被重置为0，初始高度不等于设置的高度。

margin: auto没法实现图片水平居中

相似块级元素没法实现垂直居中的缘由，图片的宽度默认等于自身，没法和父盒子创建联系，因此左右的外边距会被重置为0。解决方法，给图片设置display: block让图片容器占满父盒子

行内元素垂直外边距无效

对于行内元素（inline），垂直方向上的排列布局是经过line-height, vertical-align来影响的，margin值在垂直方向不会影响他们，可是水平方向但是有效的。还有一些元素，如<thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <colgroup>这些和表格相关的元素设置margin是无效的

理解BFC

EFC(Block Formatting Content)，块级格式化上下文，可简单理解为块级盒子在页面中的一块渲染区域，这块区域能够看作一个独立的容器，容器里面的元素不会影响到外边的元素，网页布局常见的文档流有普通文档流、浮动流和定位流三种，FC就是普通流。

BFC触发条件

1. 元素的float值不为none
2. overflow值不为visible
3. display值为inline-block、table-cell、table-caption
4. position值为absolute、fixed

知足上面的任一个条件均可触发BFC

BFC的做用

See the Pen BFC by wmui (@wmui) on CodePen.

做用1：触发元素的BFC，使该元素不被浮动元素覆盖

例1中黄色的盒子浮动了，致使遮盖住了普通流中的红色盒子，此时只要触发红色盒子的BFC，黄色盒子就不会覆盖红色盒子了。

做用2：包含浮动元素

在例2中，红色父盒子在普通流中，黄色子盒子浮动了，父盒子没法包围子盒子，触发父盒子的BFC，使父盒子包围子盒子

做用3： 阻止外边距叠加

在例3中是常见的外边距叠加状况，触发任一个盒子的BFC，便可阻止外边距叠加，但并非只有触发BFC才能阻止叠加。

有一种状况有些特殊，当使用overflow: hidden阻止叠加时，须要为子盒子的父元素设置这一属性，例如：

<div style="margin-bottom: 20px;">TEST</div>
 <div style="overflow: hidden">
  <div style="margin-bottom: 20px;">TEST</div>
</div>

阻止外边距叠加

除了触发BFC能够阻止外边距叠加，还有其余方法，上面说过触发外边距叠加须要知足一些条件，我只要违背那些条件天然就能够阻止外边距叠加了。对于父子嵌套叠加，我能够为父元素设置border或padding，也能够添加一个行内元素做为第一个子元素（必需要有内容），还能够触发子元素或父元素的BFC。对于非父子嵌套的外边距叠加，这实际上是一种正常的布局效果，若是非要阻止叠加，那就触发BFC，设置border或padding是不能阻止其叠加的，只有触发BFC