标准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. 【mysql】Blob类型

    来源:http://qgyang.blog.sohu.com/115847378.html 一般在需要存储较大数据时使用Bolb MySql的Bolb四种类型 MySQL中,BLOB是一个二进制大型对 ...

  2. php处理图片实现

    <?php include("SimpleImage.php");//图片处理类在下面 $url="http://f3.v.veimg.cn/meadincms/1 ...

  3. 73. Set Matrix Zeroes

    题目: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. Fo ...

  4. Mysql 基于BinaryLog的复制

    .Mysql Master将更新[Update]和变化[Change]作为事件[events]写入Binary log.Mysql slaves 被配置为读取Binary log from maste ...

  5. 在MVC的项目中访问静态页面

    MVC在生成项目的时候会生成的WEB-INF底下.这个文件夹下面的文件是受保护的,都会走MVC的流程, 但是我希望在WebContent底下可以使用静态页面, 那么需要进入springmvc-serv ...

  6. MVC – 4.mvc初体验(2)

    5.显示学员列表 效果 数据表 5.1 首先,在文件夹Models新建一个新建项(W),选择ADO.NET 实体数据模型 (SingleTest.edmx) 5.2 建一个控制器,StudentsCo ...

  7. securecrt 用心跳保持连接

    选项->会话->终端->发送协议NO-OP(P)

  8. Kl 证明 凸函数

    回到随机变量传输问题,假设传输中我们不知道具体 分布情况(unknown),我们用一个已知的分布 ,来模拟它,那么在这种情况下如果我们利用 尽可能高效的编码,那么我们平均需要多少额外的信息量来描述x呢 ...

  9. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  10. Android的两种事件处理机制

    UI编程通常都会伴随事件处理,Android也不例外,它提供了两种方式的事件处理:基于回调的事件处理和基于监听器的事件处理. 对于基于监听器的事件处理而言,主要就是为Android界面组件绑定特定的事 ...