标签:
类比真实世界中的盒子,有四个属性: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