盒模型

• 标准盒模型，以在 Chrome 中为例。
    一个元素的真实宽度 = 2（margin + padding + border） + width 。
  

  
    所以，CSS 中的 width 只表示内容的宽度。以上被称为标准盒模型。

• CSS3 中有一个 box-sizing 属性。
    box-sizing: border-box; 可以规定元素以 border 作为盒模型；即真实宽度 = 2margin + width，其中 width = 2（padding + border） + 内容宽度；

• 外边距合并
    在 BFC 中也涉及一部分外边距合并，在此处只讨论普通文档流中的外边距合并。
    首先，外边距合并，1.只在普通文档流中的块级元素身上会发生；2.只在上下外边距之间才会发生，左右外边距不会合并。满足这两点才会发生外边距合并。
    所以一个行内块元素 (display: inline-block) 和一个块级元素 (display: block) 元素之间不会发生外边距合并。
  如下是具体情况分析：

• 1.两个块级元素上下分布

  
  

• 2.一个元素包围另一个元素。（此时，父元素不能有 border 或者 padding；即两者的margin是直接接触的）

  
  

• 3.一个空元素，有 margin 属性，但是没有 border 和 padding 属性，那么它自身会发生上下边距合并。
  

  
    并且，再次遇到其他元素的外边距时，仍然会发生外边距合并。
  
  注：所有的边距合并，都取绝对值较大的那个值（如-10px和-20px，取-20px）。

IE6，7，8有怪异模式
  IE6/7/8中在声明时，不加上 DOCTYPE 会导致浏览器按照IE盒模型进行渲染，即真实宽度 = width + 2margin ；其中 width = 2（padding + border）+ 内容宽度。