盒子模型是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. 归并排序算法 java 实现

    归并排序算法 java 实现 可视化对比十多种排序算法(C#版) [直观学习排序算法] 视觉直观感受若干常用排序算法 算法概念 归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Di ...

  2. Jenkins Slave 通过JNLP 的方式 访问Master IP 总是127.0.0.1

    解决办法,重启机器 可能是我以前用的jenkins url 是127.0.0.1 然后是缓存什么没有释放掉所致 <jnlp codebase="http://183.62.104.48 ...

  3. Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'

    Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, ...

  4. SQL2008代理作业出现错误: c001f011维护计划创建失败的解决方法

    SQL2008数据库总会出现从 IClassFactory 为 CLSID 为 {17BCA6E8-A95D-497E-B2F9-AF6AA475916F} 的 COM 组件创建实例失败,原因是出现以 ...

  5. 关于mysql的几个必知点

    实际运用中遇到的才了解到的 导出sql文件时navicat导出的sql文件形式是一条记录一个insert语句,所以文件会比较大点,后续插入也会比较慢,而用mysqldump命令导出的sql文件会合并插 ...

  6. 給eclipse添加字体，设置字体

    问题? 一般情况的更换字体就是:1.首先打开Window ---> Preferences ---> General ---> Appearance ---> Colors a ...

  7. iOS · UILabel加删除线

    创建自定义子类DeleteLineLabel,继承自UILabel,然后在自定义子类DeleteLineLabel中 方法一(上下文): - (void)drawRect:(CGRect)rect { ...

  8. Linux中tcpdump的编译和使用

    tcpdump官网:http://www.tcpdump.org/ 转载于:http://www.cnblogs.com/hzl6255/p/6147985.html 目录 1. 介绍 2. 编译 2 ...

  9. Python企业级开发之一：基础

    Python企业级开发相关内容.这里涉及到Python开发过程中的问题以及解决办法.还提供新的开发思路. 脚本开发的一些共同的问题.如:1.对OO的支持不完善,2.问题定位方式给出的信息过于晦涩,3. ...

  10. #region Json转DataTable

    #region  Json转DataTable        private DataTable Json2Dtb(string json)        {            JavaScrip ...