W3C盒模型和IE盒模型的差异

W3C盒模型和IE盒模型的区别

盒模型的定义（标准盒模型）

CSS 盒模型 （或者框模型）(Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
content宽度不包含边框和内边距

盒模型的定义（非准盒模型（IE6版本以下））

IE6版本及其以下采用的非标准盒模型，IE6以上版本采用W3C的标准模型
content宽度包含边框和内边距

标准盒模型和非标准和模型的区别

盒子占据的位置

标准盒模型占据位置和实际大小：
盒子占位宽 = content宽度 + 左右内边距（或者填充）+ 左右边框 + 左右外边距
盒子占位高 = content高度 + 上下内边距（或者填充）+ 上下边框 + 上下外边距
盒子实际宽 = content宽度 + 左右内边距（或者填充）+ 左右边框
盒子实际高 = content高度 + 上下内边距（或者填充）+ 上下边框
非标准盒模型占据位置和实际大小：
盒子占位宽 = content宽度 + 左右外边距
盒子占位高 = content高度 + 上下外边距
盒子实际宽 = content宽度
盒子实际高 = content高度

下面为案例（ie5和chrome测试代码和截图）

	body,div{           
	     margin: 0;           
	     padding: 0;       
	}       
	#wrapper{            
	    width: 200px;            
	    height: 300px;            
	    padding: 50px 60px;            
	    margin: 10px 70px 20px 30px;            
	    border: 10px solid red;            
	    background-color: #666;       
	 }

虽然ie5的布局标准和chrome一样，但盒子实际大小去不一样

可能浏览器问题导致的吧
下面是ie5的截图
其实ie5content宽度应该显示为60 *180


明显比标准盒模型小了好多
下面为chrome截图


W3C为了让所有浏览器界面保持一致，推出了box-sizing（怪异盒模型），该css属性可以设置和IE的非标准盒模型一样的效果
不过ie6以上版本已经按照标准盒模型解析了