CSS中的盒模型

定义：用来装页面上的元素的矩形区域。css中的盒模型包括IE盒子模型和标准的W3C盒子模型。

IE盒子模型

W3C盒子模型

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

假如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：202+102+10*2+200=280px;

高度：202+102+20*2+50=130px;

盒子的实际宽度大小为:102+102+200=240px;

实际高度：102+102+50=90px;

用IE盒子模型解释 ：

盒子在网页中占据的大小为202+200=240px; 高：202+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

在CSS3中引入了box-sizing属性，

• box-sizing:centent-box表示标准的盒子模型；
• box-sizing:border-box表示是IE盒子模型；
• box-sizing:padding-box这个属性值的宽度包含了左右pading+width；

CSS3的box-sizing属性给了开发者选择盒模型解析方式的权利。使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。