为了解决 IE6 及更早版本的盒模型浏览器兼容问题,IE采用了一种另外一种盒模型,即怪异盒模型,也被称为 IE 盒模型。 在怪异盒模型中,元素的宽度和高度包括了内边距和边框,而不是仅仅包括内容区域。具体来说,元素的宽度和高度是包括他的内边距和边框,并且不会改变内容区域的大小。 例如...
不难看出,怪异盒模型的一个构成形式为元素的宽高包含了填充以及边框所占有的空间,也就是说当我们页面元素为怪异盒模型的时候,给予元素padding或者border属性之后并不会改变元素原有宽高的值,而如果我们给标准盒模型的元素添加padding或者border属性之后,元素最终的宽高值会发生变化,盒子会变大,这也就是标准盒模型与...
而标准盒模型和怪异盒模型最大的区别就是在width和height属性的计算方式上不同。 1. 标准盒模型 标准盒模型是根据W3C规范所制定的,目前除了IE5.X和IE6等极少部分浏览器,我们使用的大部分浏览器都是采用的标准盒模型。 可以看出,标准盒模型的width=content(宽度),height=content(高度),如: .root{width:200px;h...
标准盒模型和怪异盒模型的区别 css盒模型本质是一个盒子,它由边距、边框、填充和实际内容组成。盒模型能够让我们在其他元素和周边元素边框之间的空间放置元素。 标准盒与怪异盒的区别在于他们的总宽度的计算公式不一样。标准模式下总宽度=width+margin(左右)+padding(左右)border(左右);怪异模式下总宽度=width+margin...
标准盒模型和 IE盒模型的区别在于设置 width 和 height 属性时,所对应的范围不同: 标准盒模型的 width 和 height 属性的范围只包含了 content内容区。 IE盒模型(怪异盒模型)的 width 和 height 属性的范围包含了 border、padding 和 content。 案例展示 ...
而标准盒模型和怪异盒模型最大的区别就是在width和height属性的计算方式上不同。 1. 标准盒模型 标准盒模型是根据W3C规范所制定的,目前除了IE5.X和IE6等极少部分浏览器,我们使用的大部分浏览器都是采用的标准盒模型。 可以看出,标准盒模型的width=content(宽度),height=content(高度),如: ...
标准盒模型和怪异盒模型的主要区别在于它们处理元素宽度、高度、内边距和边框的方式不同。在标准盒模型中,一个元素的宽度和高度仅仅包括内容的宽度和高度,而不包括边框和内边距。换句话说,如果你为一个元素设置了特定的宽度和高度,那么这些尺寸将仅应用于元素的内容区域。边框和内边距会在此基础上增加...
一、W3C标准盒模型 W3C标准盒模型 由图可得,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 二、IE怪异盒模型 由图可得,一个块的总宽度= width + margin(左右) 1、如何运用 只要在文档首部加了doctype申明,即使用了标准盒模型,而不加,则会由浏览器自己决定,比如,ie 浏览器中显...
51CTO博客已为您找到关于标准盒子模型和怪异盒子模型的区别的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及标准盒子模型和怪异盒子模型的区别问答内容。更多标准盒子模型和怪异盒子模型的区别相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成
1、怪异盒模型也叫IE盒子模型 怪异盒主要表现在IE内核浏览器中,当前大部分浏览器支持的是W3C的标准盒子模型,不过其他浏览器也保留了IE盒子模型的支持,需要在CSS中添加触发怪异盒的条件。 怪异盒子(IE盒子模型)的触发条件: (1) 给元素添加CSS3属性box-sizing:border-box; (注:所以如果用CSS3新属性,就不要考虑低...