码迷,mamicode.com
首页 > 其他好文 > 详细

盒模型

时间:2015-08-20 12:20:34      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!