CSS盒子模式都具备的属性包括:内容(content)、填充(padding)、边框(border)、边界(margin)。
盒子模型分为两类:W3C标准盒子模型和IE盒子模型 (微软确实不喜欢服从他家的标准)
这两者的关键差别就在于:
- W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(padding)和边框(border)
- IE盒子模型——属性高(height)和属性宽(width)这两个值包含 填充(padding)和边框(border)
我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型(需要在页面中声明DOCTYPE类型),这样可以避免多个浏览器对同一页面的不兼容。
因为如果不声明DOCTYPE类型,IE会将盒子模型解释为IE盒子模型,FireFox等会将其解释为W3C盒子模型;
而如果在页面中声明了DOCTYPE模型,所有的浏览器都会把盒子模型解释为W3C盒子模型。
请看下面一段代码:
<!DOCTYPE HTML>
<html>
<head>
<title>W3C.html</title>
<style type="text/css">
#test{
width:100px;
height:100px;
border:solid 10px red;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
以上代码显示的是W3C的标准盒子模型,去掉第一行就是IE盒子模型。
看看这简单代码在浏览器中的展示:
标准模型在两个浏览器中显示相同
IE盒子模型在不同浏览器中显示有差异,容易出现bug
另外,检测页面的盒子模型类别可以使用jQuery中的$.boxModel属性(现已经不再推荐使用)或者$.support.boxModel属性。如果返回值为true表示W3C盒子模型,如果为false则为IE盒子模型。
- 大小: 9.8 KB
- 大小: 10.1 KB
分享到:
相关推荐
IE盒子模型和标准W3C盒子模型.盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。
其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。 盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释...
网页里有两种盒子模型标准一是W3C盒子模型;二是IE盒子模型(IE浏览器默认的模型)下面就用公式来区分这两种不同的盒子模型
1.1 W3C盒子模型(标准盒模型) 1.2 IE盒子模型(怪异盒模型) 2.1 标准模型和IE模型的区别
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。 例:一个盒子的 margin 为 20px,border 为 1px,...
盒子模型又分为 : W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是W3C标准盒模型(标准盒模型),也有保留对怪异盒子样式的解析,当然IE沿用的是自己标准的盒模型(怪异盒子模型) 用...
2010-8-18 去腾讯面试,问IE6。...结论:标准模式时,IE6浏览器采用W3C盒子模型,此时IE6、Firefox表现一致。 代码: 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional
CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在) 一个盒子的构成:盒子中的内容:content盒子的边框:border盒子边框与内容之间的距离:...
介绍一下CSS的盒子模型?1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;哪些属性可以继承
从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。 当然前端工程师在写页面布局的时候该采取的是 ...
有两种, IE 盒子模型、W3C 盒子模型; 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border); 区 别: IE 的 content 部分把 border 和 padding 计算了进去; 2. css 选择器优先级? !important >...
content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border-box:怪异盒模型,低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式: box-sizing:content-...
文档中的每个元素被描绘为矩形盒子。...在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 在IE模型中: 总宽度 = margin-left +
程序员面试刷题的书哪个好 ...HTML和XHTML有什么区别 ...比如:若不声明DOCTYPE类型,IE6浏览器会将盒子模型解释为IE盒子模型,FireFox等会将其解释为W3C盒子模型 所以,为了页面的正常显示,一定要写文档声明 行内元
11.3.2.2 showModalDialog和showModelessDialog--非W3C或ECMAScrip标准 11.3.3 状态栏 11.4 框架--上层的Window对象 11.4.1 多框架应用 11.4.2 框架之间的关系 11.4.3 框架的命名 11.4.4 ...