css盒子模型

  css盒子模型包括IE盒子模型和标准下W3C盒子模型。这两种盒子模型都是由内容（content）、内填充（padding）、边框（border）和外边距（margin）四部分组成。
  但是这两种盒子模型有什么不同的地方呢？接下来我们看下面两张图。

01-标准盒子模型图解
02-IE盒子模型图解

  从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围。
  在标准的盒子模型中，width指的是content的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：
  标准盒子模型的盒子宽度：左右margin+左右border+左右padding+width
  IE盒子模型的盒子宽度：左右margin+width

  在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing：border-box表示IE盒子模型。默认的情况下是标准盒子模型,可看下图：
（1） 标准的盒子模型(默认情况下)：

（2） IE盒子模型：