盒子模型：如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.parent{width: 1000px;height: 400px;background-color: yellow;border: 2px solid blue;}.red{width: 500px;height: 300px;border: 2px solid red;padding:5px;margin:10px;float: left;}.black{width: 400px;height: 300px;border: 2px solid black;padding:10px;margin:10px;float: right;}</style></head><body><div class="parent"><div class="red"></div><div class="black"></div></div></body></html>
蓝色边距的盒子：width:1000px
红色边距的盒子：width:500px,border:2px,margin:10px,padding:5px
它的总宽度为=width+border(左右)+margin(左右)+padding(左右)=534px
黑色边距的盒子：width:400px;border:2px,margin:10px,padding:10px;
它的总宽度为=width+border(左右)+margin(左右)+padding(左右)=444px
蓝盒子width>=红盒子+黑盒子
ps：里面所有的值加到一起一定不能大于父盒子的内容区的宽度width
总的宽度=内容区的宽度width+border(左右)+padding（左右）+margin(左右)
如果设置了浮动，不是正常的文档流，设置了一个margin-right:10px;另一个设置了margin-left:40px;要把所有的margin值相加，之间的距离是10+40=50px
如果不设置浮动，而是正常的文档流，设置了一个margin-bottom:10px，另一个设置了margin-top:40px;如果有叠加取叠加部分的最大值40
如图，下面那个盒子的margin-top会覆盖掉上方盒子的margin-bottom,代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.red{width: 500px;height: 300px;border: 2px solid red;margin-bottom: 10px;}.black{width: 400px;height: 300px;border: 2px solid black;margin-top: 40px;}</style></head><body><div class="parent"><div class="red"></div><div class="black"></div></div></body></html>
浏览器的兼容问题：
根据w3c的规范，元素内同占据的空间是由width属性设置的，而内容周围的padding和border是另外计算的。
但IE5.X和6在怪异模式下使用自己的非标准模式，这些浏览器的width属性不是内容的宽度，而是内同、内边距和边框的宽度的总和。
解决方法：不要给元素添加具体制定宽度的内边距，而尝试将内边距或外边距添加到元素的父元素和子元素。
IE8及更早IE版本不支持设置填充的框和边框的宽度属性。解决IE8和更早IE版本不兼容问题可在HTML页面设置<!DOCTYPE html>即可
