CSS盒模型
回复数(0) 浏览数(38)
{{topic.upvote_count || 0}} 编辑 回复

当对一个文档进行布局的时候,浏览器的渲染引擎将所有元素表示为一个个矩形的盒子

盒模型又分为标准盒模型(W3C盒模型)和IE盒模型,这两种盒模型最大的区别就是宽高的计算方式不一样

盒模型
盒模型

可以看出
标准盒模型的宽度 = 内容宽度
ie盒模型的宽度 = 边框宽度+内边距宽度+内容宽度

为什么会存在两种盒模型?
万维网联盟(W3C)在1996年发行并于1999年修订的CSS1中给出了盒模型的标准,当任意一个块级元素的宽度或高度被显式指定,它应当只确定这个可见元素自身的宽度或高度,而padding, border和margin随后被应用
但是在那时,非常少浏览器供应商严格地实施了W3C盒模型。当时的两种主要浏览器,Netscape 4.0和Internet Explorer 4.0均定义宽度和高度为边框到边框的距离(ie盒模型的计算方式)
当微软开始开发与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们IE6.0以后的版本在浏览器内嵌了两种表现模式: Standards Mode(标准模式或Strict Mode)和Quirks mode(怪异模式或兼容模式Compatibility Mode)。在标准模式中,浏览器根据W3C所定的规范来显示页面;而在怪异模式中,页面将以IE5,甚至IE4的显示页面的方式来表现,以保持以前的网页能正常显示。

在ie6-7中是不支持box-sizing这个属性的,所以在标准模式下,盒模型默认是标准盒模型,在怪异模式下默认的是ie盒模型,在ie8之后才支持通过box-sizing属性来设置元素的盒模型

以上资料参考自
IE盒模型缺陷
HTML文档类型DTD与浏览器怪异模式

{{topic.upvote_count || 0}}

当对一个文档进行布局的时候,浏览器的渲染引擎将所有元素表示为一个个矩形的盒子

盒模型又分为标准盒模型(W3C盒模型)和IE盒模型,这两种盒模型最大的区别就是宽高的计算方式不一样

盒模型
盒模型

可以看出
标准盒模型的宽度 = 内容宽度
ie盒模型的宽度 = 边框宽度+内边距宽度+内容宽度

为什么会存在两种盒模型?
万维网联盟(W3C)在1996年发行并于1999年修订的CSS1中给出了盒模型的标准,当任意一个块级元素的宽度或高度被显式指定,它应当只确定这个可见元素自身的宽度或高度,而padding, border和margin随后被应用
但是在那时,非常少浏览器供应商严格地实施了W3C盒模型。当时的两种主要浏览器,Netscape 4.0和Internet Explorer 4.0均定义宽度和高度为边框到边框的距离(ie盒模型的计算方式)
当微软开始开发与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们IE6.0以后的版本在浏览器内嵌了两种表现模式: Standards Mode(标准模式或Strict Mode)和Quirks mode(怪异模式或兼容模式Compatibility Mode)。在标准模式中,浏览器根据W3C所定的规范来显示页面;而在怪异模式中,页面将以IE5,甚至IE4的显示页面的方式来表现,以保持以前的网页能正常显示。

在ie6-7中是不支持box-sizing这个属性的,所以在标准模式下,盒模型默认是标准盒模型,在怪异模式下默认的是ie盒模型,在ie8之后才支持通过box-sizing属性来设置元素的盒模型

以上资料参考自
IE盒模型缺陷
HTML文档类型DTD与浏览器怪异模式

38
回复 编辑