w3c标准盒模型与IE传统模型的区别

 一、盒子模型(box model)

在HTML文档中的每个元素被描绘为矩形盒子。确定其大小，属性——比如颜色、背景、边框，及其位置是渲染引擎的目标。

CSS下这些矩形盒子由标准盒模型描述。这个模型描述元素内容占用空间。盒子有四个边界：外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。

盒模型的计算有两种：w3c标准盒模型和IE传统盒模型

 

w3c标准盒模型主要由：magin + border + padding + content(他不包含其他部分)
IE盒子模型主要由：magin +  content(他里面包含了border和padding)
为了能更清楚的了解这其中的差异，举个简单的例子：

//举个例子：
div{width:100px;height:100px;padding:10px;border:5px;magin:30px}

//在标准盒模型下面：
//div元素空间尺寸为：100+10*2+10*2+30*2 = 200px
//div元素大小为：100+10*2+10*2 = 140px;

//在IE盒模型下面：
//div元素空间尺寸：100+30*2 = 160px;
//div元素大小: 100px;