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

  那应该选择哪中盒子模型呢?当然是“标准 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 盒子模型。

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)的更多相关文章

  1. 标准W3C盒子模型和IE盒子模型

    标准W3C盒子模型和IE盒子模型   CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...

  2. w3C盒子模型和IE的盒子模型

    W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分IE 盒子模型的范围也包括 margin.border.padding. ...

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

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

  4. 标准盒子模型和IE盒子模型

    标准盒子模型 = margin + border + padding + content (content =  width | height) IE盒子模型 = margin + content ( ...

  5. W3C的盒子模型和IE的盒子模型

    盒子模型分为两种:W3C盒子模型(标准盒子模型)和IE盒子模型 盒子模型组成:content+padding+border+margin 标准盒子模型的width就是content 而IE盒子模型的w ...

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

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

  7. CSS盒子模型和IE浏览器

    CSS盒模型图解 下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示. 在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding ...

  8. 关于css盒子模型和BFC的理解

    CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...

  9. CSS布局(一) 盒子模型

    一.盒子模型 标准盒子模型 从下图可以看到标准 w3c 盒子模型的范围包括 content.padding.border.margin,并且 content 部分不包含其他部分. 怪异盒子模型 从下图 ...

随机推荐

  1. iOS 开发:TCP三次握手连接

    在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认: 第二次握 ...

  2. SQL隐式装换消耗过高CPU

    错误参数类型numeric /*100001790*/select uid from voip_userextendcontactinfo with (nolock) where sipid = 11 ...

  3. 物理引擎-Physx的源代码去哪里找

    前几天无意中看到了Physx开源了,就连自己的领导也高兴了一下,让本道士去下载源代码琢磨一下,顺便做几个例子跑起来.结果没成想这个nvidia的github上的源代码被移除了,而且csdn,pudn上 ...

  4. iOS 收起键盘的几种方式

    iOS 收起键盘的几种方式 1.一般的view上收起键盘 // 手势 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ ...

  5. rabbimq连接问题处理

    今天遇到一个rabbitmq的连接问题,之前自己写代码测试的时候并没有出现过,所以做个小总结,由于是其他项目测试部署环境发现的问题,所以一开始排查还是有点坑... 客户端上新建一个rabbitmq的c ...

  6. 详解学习C#的方法和步骤

    如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 掌握一门.NET面向对象语言,C#或VB.NET. 强烈反对在没系统学过一门面向对象语言的前提下去学ASP.NET. ASP.NET是一个 ...

  7. SACS +Petrel 2009地震

    Bentley SACS V8i SS4 05.07.01.01 海洋平台分析Schlumberger Petrel 2009地震解释油藏模拟课程 Trimble Tekla Structural D ...

  8. Bash:-:-定义空变量作为输出结合换行符\n和column输出

    RET="" declare -a HOST=() declare -a ALL_SVR=() declare -a FREESVR=() ;i<${#_ALL_AGENT_ ...

  9. 5. 网络配置与FTP服务笔记

    IP地址: Ipv4        2*32       Ipv6 tcp      网络通讯协议 udp    用户数据报协议 常见网络端口: 20  21      ftp服务 文件共享 22   ...

  10. MYSQL中存储过程的创建,调用及语法

    MySQL 存储过程是从 MySQL 5.0 开始增加的新功能.存储过程的优点有一箩筐.不过最主要的还是执行效率和SQL 代码封装.特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库 ...