盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 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。

　　　　　　盒子的实际大小不包括margin  原因是margin表示盒子与盒子之间的距离，盒子就仅仅包括content+padding+border,不应该包括margin

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

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

　　代码1：

<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 盒子模型”。

　　代码2：

<!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 盒子模型。

From:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html

IE和W3c盒模型的更多相关文章

  1. IE盒模型与W3C盒模型区别

    前两天被人问到,叫我解释一下标准盒模型与IE盒模型,额,当时只能说,知道一点,但是没有深入的去探讨过,所以下来之后就自己写了例子,亲自去验证并且查看了网上的一些资料,现将其整理如下: 一.css盒模型 ...

  2. IE盒模型和标准w3c盒模型

    Margin(外边距) - 清除边框外的区域,外边距是透明的.Border(边框) - 围绕在内边距和内容外的边框.Padding(内边距) - 清除内容周围的区域,内边距是透明的.Content(内 ...

  3. [CSS] w3c 盒模型 和 IE 盒模型

  4. IE盒子模型和W3C盒子模型

    IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...

  5. IE盒模型

    IE5.5及更早的版本使用的是IE盒模型,在在IE6及以上版本的浏览器中,浏览器支持一种解决了这种差异的可选的渲染模式,也开始遵循标准模式. IE盒模型和W3C盒模型的差异: IE盒模型,块元素的实际 ...

  6. 2017年总结的前端文章——CSS盒模型详解

    CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了.很多博客里讲得也很模糊不清,于是,我在这里重新整理一下. 可以认为每个html标签都是一个方块,然后这个方块又 ...

  7. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  8. CSS 盒模型与box-sizing

    一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...

  9. CSS盒模型（Box Model）

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

随机推荐

  1. Swift协议+代理

    Swift语言开发中使用协议+代理的用法和oc中是一样的,只不过变得是语法.现在就进入swift的协议+代理. 先上个图,看看我们要实现的效果:  首先是第一个页面,然后点击到第二个页面,最后点击返回 ...

  2. Python partial function 偏函数

    Partial function 偏函数是将所要承载的函数作为partial()函数的第一个参数,原函数的各个参数依次作为partial()函数后续的参数,除非使用关键字参数. 当函数的参数个数太多, ...

  3. 图形用户界面（GUI）事件监听机制——窗体事件Frame

    窗体事件.Button的使用 本事例给出一个窗体的定义方法,基本属性设置,给窗体添加退出按钮,让按钮具备退出的功能.熟悉监听器的使用 按钮就是事件源. 那么选择哪一个监听器呢? 通过关闭窗体事例了解到 ...

  4. 第十二、模块二、调用中国天气网和qqOnline及TrainTimeWebService接口来突出Json方法

    一. 浏览网页的时候,发送的请求.服务器反回来的永远是字符串,由于服务器后台使用的语言不通,所以就需要用工具反解,这里用到了json json方法一 json.loads()将字符串转化为python ...

  5. 第五篇、javascript正则表达式二

    一.内容概要 1)创建着呢规则表达式对象的两种方法 2)正则表达式的常用属性和方法 3)string对象常用方法中可以使用正则表达式 4)ES中其他预定义的对象:Math.Date.Number.Bo ...

  6. SQl Server 中登录名 、用户、角色、概念一览

      转载:http://www.2cto.com/database/201306/216922.html       数据库,角色,用户,安全        登录SQL server 2008可以用w ...

  7. 图解MFC基本框架（深入消息映射机制）

    首先,先看整体的消息流向图: 上图解释: 起点是消息循环,在winmain函数中(mfc中winmain函数是隐含的调用的,在app全局对象构造完后紧接着调用winmain函数),while循环中不断 ...

  8. php简单实现通讯录采集,我的第一个php,适合新手

    起源于要整理通讯录,原先用的是文件调查,现在学了php,就自己试一下.程序短小精悍,适于学习.有两个文件,bj.html用于显示和采集表单信息.bj.php用于处理数据和反馈结果.突出之处在于可以上传 ...

  9. BZOJ 1010 [HNOI2008]玩具装箱toy：斜率优化dp

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1010 题意: 有n条线段,长度分别为C[i]. 你需要将所有的线段分成若干组,每组中线段的 ...

  10. Java_异常_03_ java.lang.NoClassDefFoundError: org/apache/commons/pool/KeyedObjectPoolFactory

    异常信息: java.lang.NoClassDefFoundError: org/apache/commons/pool/KeyedObjectPoolFactory 原因: 我用的是commons ...