类比真实世界中的盒子，有四个属性：content内容,padding填充,border边框,margin边界，每个HTML标记都可看作一个盒子；每个属性都包括四个部分：上、右、下、左
两种盒模型：w3c标准、ie6下的
1.区别
相同点：都是对元素计算尺寸的模型
不同点：w3c的width和height是content的宽高，而ie6的width和height，是content+padding+border的宽高
2. 解决方案：
1.网页顶部加DOCTYPE声明，如果不加，浏览器会根据自己的行为去理解——标准盒模型
2. css3有个属性是box-sizing:content-box/border-box;
除ie6有这个困扰，form表单中有一些标签的计算也是基于ie6这种盒模型的：像input中的 submit reset button select ,采用border-box,所以增加padding和border属性，内容会向内延伸。
原文：http://www.cnblogs.com/danranysy/p/4744305.html