标准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. 【mongo】Can't take a write lock while out of disk space错误

    今天遇到了这个错误,各种无法操作.找了很久的方案,都没用.最终发现,原来是我虚拟机硬盘满了......清除了些没用的东西,就恢复了.

  2. Mysql 全文索引

    1创建一个带全文索引的表: 2查看表结构: 3,使用:SEELCT * FROM XXXX WHERE MATCH(FIELD) AGAINST ('...'); 注意:FULLTEXT,在检索时不区 ...

  3. Windows 删除 .svn标志

    之前一个项目是在SVN下面管理的,后来,考出来了,然后在Eclispe中使用,后来想用SVN管理起来,但是项目中,还是有.svn标志,只能先删除了.svn文件,然后在用svn管理起来,后来,发现.sv ...

  4. IOS开发之实现App消息推送

    转自:http://blog.csdn.net/shenjie12345678/article/details/41120637 第一部分 首先第一步当然是介绍一下苹果的推送机制(APNS)咯(ps: ...

  5. python获取指定星期的日期

  6. JS中级 - 03：文档宽高及窗口事件（选）

    可视区尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 document.body. ...

  7. 数据结构和算法 – 8.链表

    8.1.数组存在的问题 在处理列表的时候数组是常用的数据结构.数组可以对所存储的数据项提供快速地存取访问,而且它很易于进行循环遍历操作.当然,数组已经是语言的一部分了,用户不需要使用额外的内存,也不需 ...

  8. Redis不同数据类型的的数据结构实现

    我们知道Redis支持五种数据类型, 分别是字符串.哈希表(map).列表(list).集合(set)和有序集合,和Java的集合框架类似,不同数据类型的数据结构实也是不一样的. >>Re ...

  9. ASP.NET Web Api 服务器端变了，客户端该如何修改请求（转载）

    转载地址:http://www.cnblogs.com/fzrain/p/3558765.html 前言 一旦我们将API发布之后,消费者就会开始使用并和其他的一些数据混在一起.然而,当新的需求出现时 ...

  10. SQL分组和聚合（Grouping and Aggregates）

    这章应该是难点,也是成为SQL高手的必经之路. 注意有GROUP 语句时,WHERE和HAVING的场合. 前者用于检索前的条件过滤 . 后者用于检索出来结果之后的条件过滤. ========== ; ...