CSS盒子模型

CSS中的盒子模型包括IE盒子模型（IE6以下）和标准的W3C盒子模型。这两种盒子模型都包含有内容（content）、填充（padding）、边框（border）、边界（margin）这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。

如图可见，标准w3c盒子模型的宽度width不包含元素的边距padding和边框宽度border;下边再来看IE盒子模型（IE6以下）是什么样

很明显，和标准w3c盒子模型相不同，IE盒子模型的宽度width包含元素的边距padding和边框宽度border;

在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing：border-box表示IE盒子模型。默认的情况下是标准盒子模型，仔细观察一下两张图就可以看出他们之间的区别了：

（1）    第一张是标准的盒子模型：

（2）    第二张是IE盒子模型：