如下图，先建一个高为300px，宽为400px的div，并设置5px的边框和10px的padding

执行这个代码不会显示出300*400的盒子，而是呈现出了一个330*430的盒子

如上图所示，在这个盒模型中里面还包括margin,border,padding

而引起上面效果的原因是因为css两种盒子模型的不同

1.W3C的标准盒模型

在标准的盒子模型中，width指content部分的宽度

2.IE的盒模型

在IE盒子模型中，width表示content+padding+border这三个部分的宽度 

我们可以借助box-sizing属性来切换盒模型

• box-sizing：content-box是W3C盒子模型（默认属性）
• box-sizing：border-box是IE盒子模型