> css教程 > css >

ie盒模型和标准w3c盒模型区别

来源:网络 文章列表 2019-09-02 8
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 微软IE浏览器版本678下的IE盒模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。w3c标准盒模型width和height不包括padding和border

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 微软IE浏览器版本678下的IE盒模型标准 w3c 盒子模型。他们对盒子模型的解释各不相同。

2折最大的差异在于content内容这块的计算方式上的差异。

  1. w3c标准盒模型

    • width和height不包括padding和border
  2. ie盒模型

    • width和height包含padding和border
  • ie8以上都是w3c标准盒模型    ie5极其以下都是ie盒子模型,ie6、ie7、ie8在混杂模式下ie盒模型,在标准模式下是w3c标准盒模型
    (注意:ie6在混杂模式下一定是Ie盒模型,而ie7、ie8在混杂模式下不一定是ie盒模型)
  • css3中的box-sizing

    • content-box w3c标准盒模型

    • boder-box IE盒模型 / 怪异盒模型

先来看看我们熟知的标准盒子模型:

从上图可以看到标准 W3C 盒子模型的范围包括 marginborderpaddingcontent,并且 宽度width里只有content 部分,不包含其他部分

从上图可以看到 IE 盒子模型的范围也包括 marginborderpaddingcontent,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading

网页中的盒子模型;我们常常要控制盒子模型的宽度width:   

w3c中的盒子模型的宽:包括margin+border+padding+width;

    width:margin*2+border*2+padding*2+width;

    height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性;

例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;

 如果用w3c盒子模型解释,那么这个盒子模型占用的

 宽度为:20*2+10*2+10*2+200=280px;

 高度:20*2+10*2+20*2+50=130px;

 盒子的实际宽度大小为:10*2+10*2+200=240px;

 实际高度:10*2+10*2+50=90px;

用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px; 高:20*2+50=90px;

盒子的实际大小为:宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

混杂模式和标准模式

在多年以前(IE6诞生以前),各浏览器都处于各自比较封闭的发展中(基本没有兼容性可谈)。随着WEB的发展,兼容性问题的解决越来

越显得迫切,随即,各浏览器厂商发布了按照标准模式(遵循各厂商制定的统一标准)工作的浏览器,比如IE6就是其中之一。但是考虑到以

前建设的网站并不支持标准模式,所以各浏览器在加入标准模式的同时也保留了混杂模式(即以前那种未按照统一标准工作的模式,也叫怪

异模式)。经过多年的发展,后来又出现了近似标准模式(在一种模式中同时融入标准模式和部分混杂模式的特性,也称为接近标准模式、

准标准模式、最有限混杂模式)和超级标准模式近似标准模式、标准模式、超级标准模式三者也共同被称作标准模式)。因此,浏览器的

模式可以分为两类:标准模式和混杂模式,其中,标准模式又可更严格的分为近似标准模式、标准模式、超级标准模式。

  1. 混杂模式会让IE的行为与(包含非标准特性的)IE5相同
    而标准模式会让IE的行为贴近W3C标准
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  1. 标准模式可以通过doctype 和 严格型(strict)声明来开启。
    而混杂模式可以通过过渡性(transitional)和框架集型(frameset)声明来开启

E特有功能,通过HTML注释中的条件语句然不同的IE版本识别注释中的内容,这对IE的hacks很有帮助。

1)<!--[if lt IE 7]> : 小于 IE7 的版本 ( Less than );

2)<!--[if lte IE 7]> : 小于或等于 IE7 的版本 ( Less than or equal );

3)<!--[if gt IE 7]> : 大于 IE7 的版本 ( Greater than );

4)<!--[if gte IE 7]> : 大于或等于 IE7 的版本 ( Greater than or equal );

5)<!--[if !IE 7]> : 不等于 IE7 的版本 ( Not );

6)<!--[if !IE]> :不等于 IE 的版本 ( equal );

<!--[if IE 6]>
    Only recognized in IE7;
    只能被IE7识别
    此处可以填样式
    <![endif]>
版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接