CSS盒子模型

介绍一下标准的CSS盒子模型？与低版本IE的盒子模型有什么区别？

标准的盒子模型

盒模型由content（内容），padding（内填充），border（边框），margin（外边距）组成。例如对div定义宽高时，只定义content中的内容。

比如对一个盒子分别设置宽高，padding值，border值，margin值：

div{    width:200px;    height:200px;    margin:30px;    padding:20px;    background-color:red;}

在css中设置的宽高只存在于content部分,因此:
设置的宽高=content部分的宽高
总的宽高=content+padding+border+margin

IE盒子模型

设置的宽高=content+padding+border
总的宽高=content+padding+border+margin

比如给一个盒子设置宽高，padding值，border值

div{    width:200px;    height:200px;    padding:20px;    border:2px solid red;}

效果图如下：

设置的宽高=content+padding+border，因此content部分是156px。

IE下的盒模型与css3中的 box-sizing：border-box 属性类似，将padding值与border值归纳与设置的宽高中。box-sizing：border-box；