认识W3C标准盒子模型，理解外边距叠加

概述：

注：加粗斜体字是非常重要的概念，决定着你是不是能看懂那句话，所以不懂的请一定要搜索一下。

页面上的每个元素，都在一个矩形框里。

每个矩形框都是一个盒模型。

每个盒模型都由内容区域（content）、边框（border ）、内填充（padding）和外边距（margin）组成。

这四个属性都可以独立存在。也就是说，一个盒子可以只有content，也可以只有border，也可以只有padding，也可以只有margin。

（图片来自网络）

关于margin：

可以有负值

Negative values for margin properties are allowed, but there may be implementation-specific limits

这个特性的作用，强大到可以单独写一篇文章了。所以这里先停留在认知层面就够了。

背景永远都是透明的
可能会失效

margin-top and margin-bottom have no effect on non-replaced inline elements.

给一个宽度和高度不是由外部资源影响的行内级元素（例如a元素、span元素）设置margin-top和margin-bottom是没有任何效果的。

垂直相邻的外边距会折叠

Adjoining vertical margins collapse, except:

Margins of the root element's box do not collapse.

If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context。

no line boxes, no clearance, no padding and no border separate them.

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child

bottom margin of box and top margin of its next in-flow following sibling

bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero or 'auto' computed 'height', and no in-flow children

两个垂直的margin在一定条件下会折叠，即两个margin合并成一个。

合并规则是，最终的值是两个margin中的最大值，即margin=max(margin1,margin2)。如果有一个是负值，则等于正值减去负值。如果都是负值，则用0减去两个负值。

margin-bottom	margin-top	结果
30px	20px	30px
-30px	20px	-10px
-30px	-20px	-50px

折叠的条件其实是很严苛的，只要不满足任何一条要求，都不会发生折叠。

先来看一个满足条件的例子。

<div class="wrap">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

body {
  background-color: #63BD84;
}
.wrap {
  width: 200px;
  background-color: #42A5CE;
}
.div1,
.div2{
  height: 100px;
  margin: 10px;
  background-color: #BDFFF7;
}

最终的结果是这样的：

div1的margin-top和父元素的margin-top结合在一起了，又与body的margin-top结合在一起了，最终与html有10px的margin（因为html是根元素，他的margin不折叠）。

div1的margin-bottom和div2的margin-top结合在一起了。

div2的margin-bottom和父元素的margin-bottom结合在一起了。

可以产生这样的效果是因为：

1.这三个盒子都是在普通流内的。如果让div1和div2浮动起来或者绝对定位，他们的margin将不再折叠。

body {
  margin: 0; //浏览器的默认样式是margin:8;
  background-color: #63BD84;
}
.container {
  width: 300px;
  background-color: #CEE6E6;
}
.wrap {
  height: 300px;
  width: 200px;
  background-color: #42A5CE;
}
.div1,
.div2 {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #BDFFF7;
}

2.他们都在同一个块级格式化上下文中，如果父元素创建了一个新的块级格式化上下文：

body {
  margin: 0; //浏览器的默认样式是margin:8;
  background-color: #63BD84;
}
.container {
  width: 300px;
  background-color: #CEE6E6;
}
.wrap {
  overflow: hidden;  //创建新的块级格式化上下文
  width: 200px;
  background-color: #42A5CE;
}
.div1,
.div2 {
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #BDFFF7;
}