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盒子模型：
网友评论