盒模型

前面提到,盒模型(box mode)是浏览器 Quirks Mode 和 Standards Mode 的主要区别。

描述

对于“盒模型”一词并没有明确的文档定义,它是开发人员描述 CSS 中块级元素的一种约定俗称。

具体而言,针对一个块级元素,如<p>、<div>、<span>等,CSS 的规范定义了一个宽度和高度,以及 3 个级别的环绕它的框 padding、border 和 margin 。这些属性我们可以把它转移到我们日常生活中的盒子上来理解,所以将这种模型称为盒模式。对于盒模型,针对高度和宽度的定义,不同浏览器的解释不同。

出于历史原因,早期的 IE 浏览器(IE 6 以前)将盒子的 padding 和 border 算到了盒子的尺寸中,这一模型被称为 IE 盒模型。该模型如图 2.1 所示,

图 2 IE 盒模型

图 2 IE 盒模型

在 IE 盒模型中,

box width = content width + padding left + padding right + border left + border right,

box height = content height + padding top + padding bottom + border top + border bottom,

而在 W3C 标准的盒模型中,box 的大小就是 content 的大小,如图 3 所示,

图 3 W3C 标准盒模型

图 3 W3C 标准盒模型

box width = content width,

box height = content height,

这一区别将导致页面绘制时所有的块级元素都出现很大的差别,所以两种不同的文档模式下的页面也区别很大。

示例展示

如下代码段所示,我们定义一个简单的 DIV 元素,设定其宽度和高度分别为 500px,定义 border 为 50px,红色。

清单 1
div.a{
	width:500px;
	height:500px;
	border:50px;
	border-style:solid;
	border-color:red;
}

分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 4 和 5 所示。明显可以看到,在 Standards Mode 下的 DIV 要大于 Quirks Mode,其实际渲染大小为 600px*600px。

图 4 IE 5 Quirks Mode

图 4 IE 5 Quirks Mode

图 5 IE 8 Standards Mode

图 5 IE 8 Standards Mode

图片元素的垂直对齐方式

CSS 中 vertical-align 属性用于设置或检索对象内容垂直对齐方式,该属性定义行内元素的 base line 相对于该元素所在行的 base line 的垂直对齐。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。其取值可以为 baseline,sub,supper,top,text-top,bottom,text-bottom,middle 等。什么是 baseline 和 bottom,它们有何区别?下面我们通过一副图来进行解释。

描述

CSS 为了确定文字行的位置,定义如下概念描述,base line,bottom line,top line, middle line。其中,base line 指的是一行字横排时下沿的基础线,baseline 并不是汉字的下端沿,而是英文字母 e 的下端沿,bottom line,指的是汉字,或者英文字母 p,g 的下端沿。如下图 6 所示。

图 6 base line 概念

图 6 base line 概念

对于 inline 元素和 table-cell 元素,在 IE Standards Mode 下 vertical-align 属性默认取值为 baseline。而当 inline 元素的内容只有图片时,如 table 的单元格 table-cell。在 IE Quirks Mode 下,table 单元格中的图片的 vertical align 属性默认为 bottom,因此,在图片底部会有几像素的空间。

示例展示

如下代码段所示,我们定义一行两列的 table,table 单元格设定为宽度和高度均为 200px 的 img 图片,为了突出显示区别,分别定义单元格与图片的边框颜色为蓝色和橘色。

清单 2
td.a
{
	border-style:solid;
	border-color:blue;
}

img.c
{
	width:200px;
	height:200px;
	border-style:solid;
	border-color:orange;
}

分别在 IE 10 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 7 和 8 所示。在 Quirks Mode 下,table 单元格中的图片与单元格底部对齐,而在 Standards Mode 下,图片与单元格之间多了 3 个像素的空间。

图 7 IE 10 Quirks Mode

图 7 IE 10 Quirks Mode

图 8 IE 8 Standards Mode

图 8 IE 8 Standards Mode

<table>元素中的字体

CSS 中,描述 font 的属性有 font-family,font-size,font-style,font-weight,分别表示了 font 的族系、大小、风格以及粗细。

描述

在 CSS 标准中,上述属性都是可以继承的。而在 IE Quirks Mode 下,对于 table 元素,字体的某些属性将不会从 body 或其他封闭元素继承到 table 中,特别是 font-size 属性。

示例展示

如下代码段所示,我们定义 body 的 font 属性为斜体、红色、加粗、fantasy 字体,对于 table 元素,未定义其 font 属性。

清单 3
body
{
	font-style:italic;
	color:red;
	font-size:200%;
   font-weight:bold;
	font-family: fantasy;
}

分别 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 9 和 10 所示。在 Quirks Mode 下,table 单元格中字体的 font-size,font-style,font-weight 属性不会继承 body,只有 family 属性会被继承。而在 Standards Mode 下,所有属性都被继承。

图 9 IE 5 Quirks Mode

图 9 IE 5 Quirks Mode

图 10 IE 8 Standards Mode

图 10 IE 8 Standards Mode

内联元素的尺寸

CSS 中常见的元素有两类,分别是 block(块级)元素及 inline(内联)元素。这两类元素的主要区别在于 block 元素通常作为独立的一块继续显示,前后都有换行,而 inline 元素则不会产生换行。根据 CSS 标准,对于 inline 元素,又可以分为 replaced 和 non-replaced 两类。

描述

什么是 non-replaced inline 元素?首先,我们解释下 non-replaced 元素,对于 HTML 中定义的元素,默认具有 CSS 格式化外表范围的元素,比如 img 元素,有自己的宽和高,我们称其为 replaced 元素,其他例 input,textarea,select,object,等都是 replaced 元素。除了这些元素之外的元素就是 non-replaced 元素。因此,具有 non-replaced 属性的 inline 元素即为 non-replaced inline 元素,如 span 元素。

在 IE Standards Mode 下,non-replaced inline 元素无法自定义大小,而在 IE Quirks Mode 下,定义这些元素的 width 和 height 属性,能够影响该元素显示的大小尺寸。

示例展示

如下代码段所示,为了突出显示,我们定义一个背景色为橘色的 div 中嵌套一个 span 元素,该 span 元素的高和宽均为 200px,背景色为蓝色。

清单 4
div.a
{
	width:300px;
	height:300px;
	background-color:orange;
}

span.b
{
	height:200px;
	width:200px;
	background-color:blue;
}

分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 11 和 12 所示。在 Quirks Mode 下,span 元素能够正常显示,左图中 200*200 的蓝色的区块。而在 Standards Mode 下,span 尺寸为零。

图 11 IE 5 Quirks Mode

图 11 IE 5 Quirks Mode

图 12 IE 8 Standards Mode

图 12 IE 8 Standards Mode

元素的百分比高度

CSS 中对于元素的百分比高度规定如下,百分比为元素包含块的高度,不可为负值。如果包含块的高度没有显式给出,该值等同于“auto”(即取决于内容的高度)。所以百分比的高度必须在父元素有声明高度时使用。

描述

当一个元素使用百分比高度时,在 IE Standards Mode 下,高度取决于内容的变化,而在 Quirks Mode 下,百分比高度则被正确应用。

示例展示

如下代码所示,为了突出显示,我们定义一个背景为粉色的 table,在 table 的单元格中嵌入一个背景为橘色的 div b,将该 div 的高度设置为 90%。定义 b 的子节点 c 为高度和宽度均为 200px 的 div 元素,背景为蓝色。

清单 5
table.a
{
	height:500px;
	background-color:pink;
}
div.b
{
	background-color:orange;
	width:300px;
	height:90%;
	display:block;
}
div.c
{
	width:200px;
	height:200px;
	background-color:blue;
}

分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 13 和 14 所示。在 Quirks Mode 下,div b 的高度为 talle 单元格的 90%,而在 Standards Mode 下,div b 的高度由其子节点 c 决定,为 200px。

图 13 IE 5 Quirks Mode

图 13 IE 5 Quirks Mode

图 14 IE 8 Standards Mode

图 14 IE 8 Standards Mode

元素溢出的处理

CSS 中 overflow 属性定义了一个元素的内容不适合指定的尺寸时,溢出元素内容的处理方式。默认值为 visible,即显示溢出。

描述

在 IE Standard Mode 下,overflow 取默认值 visible,即溢出可见,这种情况下,溢出内容不会被裁剪,呈现在元素框外。而在 Quirks Mode 下,该溢出被当做扩展 box 来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。

示例展示

如下代码段所示,我们定义一个背景为蓝色的 div a,在 a 中嵌入一个背景为橘色的 div b,设置 b 的高度 400px 大于 a 的高度 300px,使 a 发生溢出。

清单 6
div.a
{
	width:300px;
	height:300px;
	background-color:blue;
}

div.b
{
	width:200px;
	height:400px;	
	background-color:orange;
}

分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 15 和 16 所示。在 Quirks Mode 下,div a 的高度为又 300px 变为 400px,以适应 b 的大小,而在 Standards Mode 下,div a 的大小保持不变,溢出部分保留。

图 15 IE 5 Quirks Mode

图 15 IE 5 Quirks Mode

图 16 IE 8 Standards Mode

图 16 IE 8 Standards Mode

 

X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令,都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说,它是首选的兼容性模式。

目前IE8尚在测试版中,所以为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码:

 

<meta http-equiv="X-UA-Compatible" content="IE=7" />

 

这样我们才能使得页面在IE8里面表现正常!

浏览器市场份额的激烈竞争,给网页设计开发人员带来了兼容性设计的麻烦。单单 IE 浏览器就有好几个主流版本,IE6、IE7、IE8 等等。当然使用诸如 IETester,多版本 IE 共存解决方案之类的第三方集成工具,可以方便代码调试。但我们总需要找寻一种更为省时省力的方法。

X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高,综合考虑,启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。

各种兼容模式代码示例如下:

<meta http-equiv="X-UA-Compatible" content="IE=5" />

 

像是使用了 Windows Internet Explorer 7 的 Quirks 模式,这与 Windows Internet Explorer 5 显示内容的方式很相似。

<meta http-equiv="X-UA-Compatible" content="IE=7" />

 

无论页面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=8" />

 

开启 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码。

<meta http-equiv="X-UA-Compatible" content="edge" />

 

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

 

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说,它是首选的兼容性模式。

在现阶段,IE8 版本推向市场没有多久,份额不高。因此,考虑兼容旧版本的模式值得推荐。

 

参考:http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/

posted @ 2014-04-08 20:19 琅琊丶 阅读(304) 评论(0) 推荐(0) 编辑
摘要: 声明必须是 HTML 文档的第一行,位于 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。HTML5 不基于 SGML,所以不需要引用 DTD。提示:请始终向 HTML 文档添加 声明,这样浏览器才能获知文档类型。常用的 DOCTYPE 声明HTML 5HTML 4.01 Strict该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允... 阅读全文
posted @ 2014-04-08 20:16 琅琊丶 阅读(333) 评论(0) 推荐(0) 编辑
摘要: 类式继承模式#4——共享原型 阅读全文
posted @ 2013-11-21 09:18 琅琊丶 阅读(188) 评论(0) 推荐(0) 编辑
摘要: 类式继承模式#3——借用和设置原型 阅读全文
posted @ 2013-11-21 09:17 琅琊丶 阅读(203) 评论(0) 推荐(0) 编辑
摘要: 1 2 3 4 5 类式继承模式#2——借用构造函数 6 7 8 9 52 53 阅读全文
posted @ 2013-11-21 09:16 琅琊丶 阅读(168) 评论(0) 推荐(0) 编辑
摘要: 1 2 3 4 5 类式继承模式#1——默认模式 6 7 8 9 37 38 阅读全文
posted @ 2013-11-21 09:14 琅琊丶 阅读(187) 评论(0) 推荐(0) 编辑
摘要: Ecmascript中,Object类型是所有它的实例的基础。换句话说,Object类型所具有的任何属性和方法也同样存在于更具体的对象中。Object的每个实例都具有以下属性和方法,这些都能方便于我们开发过程中对自己前面建立的对象进行判断。constructor——保存着用于创建当前对象的函数,即构造函数;hasOwnProperty(propertyName)——用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在,其中,propertyName必须是字符串形式;isPrototypeOf(Object)——用于检查传入的对象是否是另一个对象的原型。propertyIsEnum 阅读全文
posted @ 2013-06-17 10:16 琅琊丶 阅读(303) 评论(0) 推荐(0) 编辑
摘要: Undefined 类型:只有一个值的数据类型,这个特殊值就是undefined。Null类型:只有一个值的数据类型,这个特殊值就是null,undefined值是派生自null值的。console.log(undefined == null) //true一般将要保存为对象的变量名最好先保存为null,以便后面做判断。Object类型object的每个实例都具有下列属性和方法:constructor——保存着用于创建当前对象的函数。hasOwnProperty——用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。(object.hasOwnProperty("na 阅读全文
posted @ 2013-05-21 14:05 琅琊丶 阅读(129) 评论(0) 推荐(0) 编辑
摘要: 匿名函数:意如其名,就是没有名字的函数。function (arg1,arg2){ ..... }匿名函数的普遍用法:1、赋值给变量:var func=function(arg1,arg2){...}2、作为参数传进另一个函数:document.getElementById("test").addEventListener("click",function(){..},false)匿名函数与闭包:很多人都将匿名函数和闭包混为一谈,其实根本就俩回事。说到闭包,我们得重新了解Javascript的作用域,执行环境(execution context):汤姆大 阅读全文
posted @ 2013-05-16 12:12 琅琊丶 阅读(360) 评论(0) 推荐(0) 编辑
摘要: public 表示全局,类内部外部子类都可以访问; 1 <?php 2 3 class Test{ 4 public $name='Janking', 5 $sex='male', 6 $age=23; 7 8 function __construct(){ 9 echo $this->age.'<br />'.$this->name.'<br />'.$this->sex.'<br />';10 }11 ... 阅读全文
posted @ 2013-05-14 10:55 琅琊丶 阅读(334) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示