文档章节

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型

i33
 i33
发布于 2012/11/06 10:03
字数 759
阅读 79
收藏 5

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

  

  从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

  ie 盒子模型

 


 

  从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。

   例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px。

  •  假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:
         宽: 20*2+1*2+10*2+200=262px
         高: 20*2+1*2*10*2+50=112px
      盒子的实际大小为:
         宽: 1*2+10*2+200=222px
         高: 1*2+10*2+50=72px

  • 假如用ie 盒子模型,那么这个盒子需要占据的位置为:
         宽: 20*2+200=240px
         高: 20*2+50=70px
      盒子的实际大小为:
         宽: 200px
         高: 50px

  那应该选择哪中盒子模型呢?当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

  再用 jquery 做的例子来证实一下。

  代码1:

<html>
<head>
 <title>你用的盒子模型是?</title>
 <script language="javascript" src="jquery.min.js"></script>
 <script language="javascript">
   var sbox = $.boxmodel ? "标准w3c":"ie";
   document.write("您的页面目前支持:"+sbox+"盒子模型");
 </script>
</head>
<body>
</body>
</html>

上面的代码没有加上 doctype 声明,在 ie 浏览器中显示“ie盒子模型”,在 ff 浏览器中显示“标准 w3c 盒子模型”。

  代码2:

<!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>
 <script language="javascript" src="jquery.min.js"></script>
 <script language="javascript">
   var sbox = $.boxmodel ? "标准w3c":"ie";
   document.write("您的页面目前支持:"+sbox+"盒子模型");
 </script>
</head>
<body>
</body>
</html>

代码2 与代码1 唯一的不同的就是顶部加了 doctype 声明。在所有浏览器中都显示“标准 w3c 盒子模型”。

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


本文转载自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html

i33

i33

粉丝 46
博文 241
码字总数 7442
作品 0
东城
私信 提问
微信小程序开发入门之布局的学习

摘要:WXSS实现了CSS布局相关的大部分规范,但在一些细节上有差异,甚至同样的语法在小程序调试工具和微信中的表现也存在差异。本章主要讲述CSS布局相关的一些基本知识,包括经典的盒子模型、...

微信小程序
2017/11/30
0
0
盒子模型的理解

概述 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。 这些属性我们可以把它转移到我们日常生活中的盒...

名字已被取
2016/03/14
58
0
CSS 盒子模型 Box Model

CSS 盒子模型概述 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白或空白边。 盒子模型有两种,分别是 IE 盒子模型...

ivon_lee
2014/04/19
327
1
【Hello CSS】第二章-CSS的逻辑属性与盒子模型

首发:krisachan.github.io 作者:陈大鱼头 github: KRISACHAN 在上一篇的第一章CSS的语法与工作流中介绍了的语法规则以及基本的渲染流程。本篇则会分享的逻辑属性以及盒子模型。 首先开篇之...

陈大鱼头
03/06
0
0
网页布局基础(1)-自动居中一列布局

基础知识 W3C标准:结构化标准语言(HTML / XML) 表现标准语言(CSS) 行为标准语言(DOM / ECMAScript) 倡导:结构、样式、行为分离。 一、CSS定位机制 1. 标准文档流(Normal flow) 从上...

iBazinga
2016/12/04
12
0

没有更多内容

加载失败,请刷新页面

加载更多

Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
30分钟前
2
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
49分钟前
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
6
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0
jenkins 插件下载加速最终方案

推荐做法 1、告诉jenkins 我哪些插件需要更新 jenkins插件清华大学镜像地址 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json 1.进入jenkins系统管理 2.进入插件管...

vasks
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部