标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

转载自：http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html

盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

　　ie 盒子模型

　　从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

　　例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。

　　那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

　　再用 jquery 做的例子来证实一下。

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">var sbox = $.boxmodel ? "标准w3c":"ie";document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

上面的代码没有加上 doctype 声明，在 ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是标准w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">var sbox = $.boxmodel ? "标准w3c":"ie";document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

代码2 与代码1 唯一的不同的就是顶部加了 doctype 声明。在所有浏览器中都显示“标准 w3c 盒子模型”。

所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型。

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/09/15/2686075.html

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)相关推荐

关于css盒子模型和BFC的理解
CSS盒子模型包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...
HTML与CSS基础（五）—— CSS布局（盒子模型）、PxCook使用
目标能够认识盒子模型的组成部分能够掌握盒子模型的边框.内边距.外边距的作用及简写形式能够计算盒子的实际大小能够了解外边距折叠现象,并知道如何解决盒子塌陷问题一.PxCook的基 ...
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录一.网页布局本质二.盒子模型三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法一.网页布局本质构建一个网页 , 首先 , 创建盒子模型 ...
CSS布局(二) 盒子模型属性
盒子模型的属性宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
CSS盒子模型/页面布局
1.盒子模型页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置 ...
html怎么创建盒子,html布局（盒子）
在body里面放置两个盒子,里面盒子设置margin-top,外层盒子生效? 在里面盒子上面加一个块元素,设置高度表单 form action="地址" method=" ...
Web标准概念--摘抄《CSS布局实录》
前言对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏的"因素"在起作用,这个因素就是:标准. 生活中各行各业都有着自己相应的标准与规范,标准可以方便交流.促进协作.提高效 ...
盒子模型（W3C盒子和IE盒子）
盒子模型(W3C盒子和IE盒子) 盒子模型封装周围的 HTML 元素,包括:margin,border,padding和实际内容. 两种盒子: border-box IE盒子模型 .content-b ...
html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念什么是盒模型,我们可以先直观的看一个东西打开Chrome浏览器,F1 ...

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)相关推荐

最新文章

热门文章