盒模型

任何HTML元素都可以看作一个盒子，它包括：外边距，边框，内边距，和实际内容。
Margin(外边距) - 边框外的区域，外边距区域是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) -内容周围的区域，内边距区域是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度，可以通过 box-sizing 属性来设置盒模型。

• 内容盒模型 box-sizing: content-box
  content-box:
  width = content width;
  height = content height

• 边框盒模型 box-sizing: border-box
  border-box:
  width = border + padding + content width
  heigth = border + padding + content heigth

• 内边距盒模型 box-sizing: padding-box （这不是一个标准的 box-sizing 选项，大部分浏览器不支持）
  padding-box:
  width = padding + content width
  heigth = padding + content heigth

浏览器默认使用内容盒模型，在ie8以下的浏览器中默认使用边框盒模型。