盒子模型是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. Spring事务配置的五种方式(转)

    前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...

  2. hdu 4869

    一个机智题,可惜比赛的时候没有机智出来 #include<cstdio> #include<cstring> #include<cmath> #include< ...

  3. 已收录的帝国cms文章被误删除了怎么办?

    我们一直提倡网站要经常备份,但是有时也会遗忘,一不小心被谁删除了那就欲哭无泪了.就像ytkah刚弄了一个站,开了个权限比较高的后台帐号给别人用,居然把两三个栏目都删除了,想发狂啊.刚好又有段时间没备份 ...

  4. mysql 。。。

    MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database Management System), 这种所谓的"关系型"可以理解为"表格 ...

  5. Lua 简单的IO交互 和迷宫代码

    function room1 () print("in room1") local move = io.read() if move == "south" th ...

  6. POJ 2253 Frogger(floyd)

    http://poj.org/problem?id=2253 题意 : 题目是说,有这样一只青蛙Freddy,他在一块石头上,他呢注意到青蛙Fiona在另一块石头上,想去拜访,但是两块石头太远了,所以 ...

  7. ORA-12560: TNS: 协议适配器错误 解决

    传统方法: 大多数网站都有记载三个方法解决 但是出现上述错误另一个原因: 刚刚安装的Oracle 里面的账户都是锁定的 需要解锁 见如下的Oracle11g安装过程 http://www.2cto.c ...

  8. java:继承

    一.继承: java只支持单继承,一个子类只能继承一个父类,使用继承是为了减少类的重复代码,且父类的构造函数不能被子类继承. 当两个类里面有相同的属性或方法,就应该考虑使用继承解决重复代码了. 继承的 ...

  9. C++:派生类的构造函数和析构函数

    4.2 派生类的构造函数和析构函数4.2.1 派生类构造函数和析构函数的执行顺序 通常情况下,当创建派生类对象时,首先执行基类的构造函数,随后再执行派生类的构造函数:当撤销派生类对象时,则先执行派生类 ...

  10. linux 查看某一端口的占用情况

    查看某一端口的占用情况: lsof -i:端口号,例如查看端口21是否被占用 lsof -i: 实例:查看端口是否被占用,如果被占用结束掉该端口 [root@localhost splunk]# ls ...