盒模型

类比真实世界中的盒子，有四个属性：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属性，内容会向内延伸。