盒子模型是css的专有名词，用来描述页面设置中的各种属性，如内容（content）、填充（padding）、边框（border）、边界（margin），由于这些属性拼在一起，与日常生活中的“盒子”很相像，因而称作盒子模型

　　盒子模型是分为两类的，一类是W3C盒子模型，另一类是IE盒子模型，最根本区别就是：属性Height与Width这两个值是否包含了padding与border。W3C盒子模型不包含padding与border，仅仅指content的height和width。而IE盒子模型则包含了padding与border。

　　

　　　　　　　　　　　　　　　　W3c模型

　　　　　　　　　               　ie模型

当然，学过jquery的人，应该都知道可以通过jquery.support.boxModel对象返回的属性值，确定页面是否是标准的W3C盒子模型，调用的方法：

　　$.support.boxModel

该方法返回一个布尔值，若是true则表示是W3C盒子模型，否则，就不是。

若是删除<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  就会是ie盒子模型

因而，在编写页面代码时，尽量先声明DOCTYPE类型，使用标准的W3C盒子模型，避免多个浏览器间的相互不兼容。

w3c盒子模型与ie盒子模型的更多相关文章

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

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

  2. CSS盒子模型与怪异盒模型

             盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准 ...

  3. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  4. css盒模型以及如何计算盒子的宽度

    css盒模型以及如何计算盒子的宽度 盒模型 每个存在于可访问性树中的元素都会被浏览器绘制成一个盒子[1]. 每个盒子都可以看成由4部分组成,它们分别是 - 元素外边距(margin).元素边框(bor ...

  5. w3c标准盒模型与IE传统模型的区别

    一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述 ...

  6. 标准盒模型与IE盒模型之间的转换

    首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...

  7. 怪异盒模型和标准盒模型--CSS

    一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...

  8. IE盒模型和标准盒模型

    标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...

  9. 标准盒模型、怪异盒模型（box-sizing）

    CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...

随机推荐

  1. 理解lua 语言中的点、冒号与self

    转载自: http://blog.csdn.net/wangbin_jxust/article/details/12170233 lua编程中,经常遇到函数的定义和调用,有时候用点号调用,有时候用冒号 ...

  2. poj 3067 Japan（线段树？，神奇卡时代码，暂未完）

    题目 //暴力的,没什么算法的,被琪琪视为傻逼的代码: //照者学长的神奇幸运卡时代码,虽然能AC,但是中途wa,tle了那么多次,啥也不想说了 //学长威武,能想出sum必须要是—— __int64 ...

  3. hdu 1309 Loansome Car Buyer

    纯粹的阅读理解题………… ;}

  4. Java 正则表达式的总结和一些小例子

    字符串处理是许多程序中非常重要的一部分,它们可以用于文本显示,数据表示,查找键和很多目的.在Unix下,用户可以使用正则表达式的强健功能实现这些 目的,从Java1.4起,Java核心API就引入了j ...

  5. 为什么Android 3.0如此罕见？

    3.0(2011年2月)代号蜂巢,专用于android系统的平板电脑,不用于手机.4.0(2011年5月公布)的开发就是让平板电脑和手机能够共用一个版本的系统.4.0通用于平板电脑和手机.

  6. don't panic !

    今天发现GoAgent的readme里边只有一句话:don't panic !这才是大师啊!同时感觉有一丝对中国网络自由的调侃- 那么,你在vim中输入:h!试试看会发生什么?再输入h 42试试看呢. ...

  7. java io异步

    1.一般来说,可以通过多线程的方式来实现异步 2.同步和异步着重点在于多个任务的执行过程中,一个任务的执行是否会导致整个流程的暂时等待: 3.而阻塞和非阻塞着重点在于发出一个请求操作时,如果进行操作的 ...

  8. HTML5入门九---Canvas画布

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 9、JPA_映射双向一对一的关联关系

    双向一对一的关联关系 举例说明:经理Manager和部门Department是双向一对一关联关系.则Manager实体类中有Department实体对象的引用,反之亦然. 其实体属性定义如下: Lis ...

  10. 转ATL对象类型

    http://hi.baidu.com/rural_child/item/d91ce5d8fba9c8e73cc2cbf9 1.Objects a.Simple Object:用于实现业务逻辑,无用户 ...