盒子模型

元素的构成：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

标准模型与IE模型的区别

标准模型：元素的宽度/高度 = content的宽度/高度
ie模型：元素的宽度/高度 = content的宽度/高度 + padding的宽度/高度 + border的宽度/高度

行内元素的垂直对齐：CSS深入理解vertical-align和line-height的基友关系。

如何设置这两种模型

box-sizing: content-box;  // 标准模式
box-sizing: border-box;  // IE模式

BFC（边距重叠解决方案）

• 基本概念：块级格式化上下文
• 基本原理
  垂直方向上的边距会发生重叠
  bfc的区域不会与浮动元素的box重叠
  bfc的元素独立，外面的元素不会影响里面的元素，里面的元素不会影响外面的元素
  计算bfc的高度时，浮动元素不参与计算
• 如何创建bfc
  overflow的值不为visible
  float的值不为none;
  position的值不为static或relative
  display的值为table类型；