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

 

CSS盒子模型：网页设计中CSS技术所使用的一种思维模型。

CSS盒子模型组成：外边距（margin）、边框（border）、内边距（padding）、内容（content）。

CSS盒子模型分为：标准W3C盒子模型，IE盒子模型，注意在两种模型中宽（width）和高（height）包括属性的不同。

标准W3C盒子模型：

W3C模型中：

　　　　　　CSS中的宽（width）=内容（content）的宽

　　　　　　CSS中的高（height）=内容（content）的高

eg:

　　　　<div style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">

　　　　　　W3C模型

　　　　</div>

则此div的实际大小：

　　　　　　　　div高=height+（padding+border+margin）*2=50+(2+1+3)*2=62px;

　　　　　　　　div宽=width+（padding+border+margin）*2=50+(2+1+3)*2=62px;

div内容占大小：

　　　　　　　　div高=height=50px;

　　　　　　　　div宽=width=50px;

 IE盒子模型：

IE模型中：

　　　　　　CSS中的宽（width）=内容（content）的宽+（border+padding）*2

　　　　　　CSS中的高（height）=内容（content）的高+（border+padding）*2

eg:

　　　　<div style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">

　　　　　　W3C模型

　　　　</div>

则此div的实际大小：

　　　　　　　　div高=height+margin*2=50+3*2=56px;

　　　　　　　　div宽=width+margin*2=50+3*2=62px;

div内容占大小：

　　　　　　　　div高=height-（border+padding）*2=50-（1+2）*2=44px;

　　　　　　　　div宽=width-（border+padding）*2=50-（1+2）*2=44px;

解决办法：

在代码顶部加如下的 doctype 声明，

　　<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

使页面以W3C盒子模型渲染。

eg：

　　<!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>
　　</head>
　　<body>
　　</body>
　　</html>

为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型。

－转载

标准W3C盒子模型和IE盒子模型的更多相关文章

  1. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

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

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

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

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

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

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

  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中盒子模型和position（一）

    今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...

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

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

随机推荐

  1. Android图片加载库：最全面的Picasso讲解

    前言 上文已经对当今 Android主流的图片加载库 进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里阅读 今天我们来学习其中一个Android主流的图片加载库的使用 - Pica ...

  2. 【mongo】pymongo通过_id删除数据

    来源:http://www.educity.cn/wenda/361741.html pymongo 根据 objectId _id 来删除数据想要删除数据,根据_id ,是最靠谱的,具体方法因为 _ ...

  3. 【python】list,dict赋值不要用等号，要用extend,update

    如果有一个list,我们用连等号的方式赋值 c = d = [1], 则当c改变时,d同样会改变.字典同理 正确做法应该是: d = [1] c = [1] 或者 d = [1] c.extend(d ...

  4. php面向对象中的静态与抽象，接口

    静态又包括: 普通成员: 普通成员是属于对象的 静态成员: 静态成员是属于类的 关键字:static self关键字:在类里面代表该类,前面不用加$ 在静态方法里面不能调用普通成员 在普通方法里面能够 ...

  5. 剑指Offer——网易笔试之解救小易

    知识要点 首先介绍一下曼哈顿,曼哈顿是一个极为繁华的街区,高楼林立,街道纵横,从A地点到达B地点没有直线路径,必须绕道,而且至少要经C地点,走AC和 CB才能到达,由于街道很规则,ACB就像一个直角3 ...

  6. NYOJ题目273字母小游戏

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAswAAAIZCAIAAAA9QP7RAAAgAElEQVR4nO3dPXKjzBqG4bMJ5VqIU2

  7. Hadoop 2.5.2 eclipse plugin 编译 win7 集成

      一.hadoop集群环境配置 参考我的前一篇文章(ubuntu + hadoop2.5.2分布式环境配置 http://www.cnblogs.com/huligong1234/p/4136331 ...

  8. C# 面试宝典

    1.简述 private. protected. public. internal 修饰符的访问权限. private  私有成员 只有类成员才能访问 protected  保护成员 只有该类及该类的 ...

  9. Pyqt QListWidget 展示系统环境变量

    今天学习了下Pyqt的 QListWidget 控件 我们先看下这个图片 这张图片就是典型的listWidget效果,我们今天就仿这样布局新建个ListWidget 在网上找了个关于QListWidg ...

  10. 学习SQLAlchemy Core

    有时间了就要慢慢看,死守DJANGO ORM,明显没有SQLAlchemy有优势. 因为SQLAlchemy针对整个PYTHON都是有用的. 找了本书,慢慢撸. <Essential.SQLAl ...