盒模型及IE盒模型中的bug

盒模型

在网页制作中,css盒模型是div布局的核心,每个元素都是以块的形式来展现。在CSS中,它将页面中的每一个段落、标题、图片等元素都看成是一个装在盒子里的东西,也就是盒子里的内容。比较让人好理解一些的一个比喻是一个大纸盒子里装了一块方形的面包,面包就是一个段落、一个标题或者一幅图片,面包比盒子要小一些。面包的边缘到盒子侧边的距离就是CSS中的内边距属性(Padding),盒子的侧面四个边形成的边框就是CSS中的Border属性,而一个网页中有很多段落、标题、图片,也就是有很多这样的盒子,这些盒子和盒子之间的距离就是CSS中的外边距属性(margin)。它的计算方式如下图所示:

IE中的盒模型bug

在IE6及以后的版本中,还有其它主流浏览器对盒模型宽高的解析不包括border和padding,而在IE6以前的版本中,IE对盒模型宽高的解析包括border和padding,这就是IE中盒模型的bug。

通常解决这个bug都是通过voice-family属性。在css3中新添加了box-sizing属性,可以更好的实现这“content-box”和”border-box“之间的切换,达到不同的效果。

马上分享给你的朋友吧~

盒模型及IE盒模型中的bug》上有 5 条评论

  1. Pingback 引用通告: css3教程:box-sizing属性 « 东篱下-有效阅读

  2. 杭州最好的KTV是哪儿?杭州东方魅力www.mote188.com
    杭州最好的夜场是哪儿?首选杭州东方魅力www.dongfangmeili.net
    杭州夜场招聘首选杭州东方魅力?www.mote188.com

  3. Pingback 引用通告: css3 box-sizing属性 | 简直是弱爆了

  4. Pingback 引用通告: box-sizing属性 | yu 0_0

  5. Pingback 引用通告: CSS3 box-sizing 属性 border的属性 – 启程了

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>