元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。 CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。 CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
2.6.2 相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 CSS 相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。 #box_relative { position: relative; left: 30px; top: 20px;
}
2.6.3 绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在一样： #box_relative {
position: absolute; left: 30px; top: 20px; }
如下图所示：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。 3 JavaScript
3.1 JavaScript 简介
什么是 JavaScript？
JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。 JavaScript 由数行可执行计算机代码组成。 JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。 所有的人无需购买许可证均可使用 JavaScript。 Java 和 JavaScript 是相同的吗？ 不同！
在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言。
Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的 C 和 C++。
JavaScript 能做什么？
JavaScript 为 HTML 设计师提供了一种编程工具
HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。 JavaScript 可以将动态的文本放入 HTML 页面
类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write(\"
\" + name + \"
\") JavaScript 可以对事件作出响应可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时。
JavaScript 可以读写 HTML 元素
JavaScript 可以读取及改变 HTML 元素的内容。 JavaScript 可被用来验证数据
在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。 JavaScript 可被用来检测访问者的浏览器
JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。
JavaScript 可被用来创建 cookies
JavaScript 可被用来存储和取回位于访问者的计算机中的信息。 3.2 JavaScript 语句、注释与变量 3.2.1 语句
JavaScript 语句
JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。 这个 JavaScript 语句告诉浏览器向网页输出 \"Hello world\"： document.write(\"Hello world\");
通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯，而且在 web 上的 JavaScript 案例中也常常会看到这种情况。 分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。
注释：通过使用分号，可以在一行中写多条语句。 JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。 浏览器按照编写顺序依次执行每条语句。 本例向网页输出一个标题和两个段落： 3.1.2 注释
可以添加注释来对 JavaScript 进行解释，或者提高其可读性。 单行的注释以 // 开始。
本例用单行注释来解释代码：
TIY
JavaScript 多行注释
多行注释以 /* 开头，以 */ 结尾。 3.1.3 变量
正如代数一样，JavaScript 变量用于保存值或表达式。
可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。 JavaScript 变量也可以保存文本值，比如 carname=\"Volvo\"。 JavaScript 变量名称的规则：
变量对大小写敏感（y 和 Y 是两个不同的变量） 变量必须以字母或下划线开始 声明（创建） JavaScript 变量
在 JavaScript 中创建变量经常被称为“声明”变量。 您可以通过 var 语句来声明 JavaScript 变量： var x;
var carname;
在以上声明之后，变量并没有值，不过您可以在声明它们时向变量赋值： var x=5;
var carname=\"Volvo\";
注释：在为变量赋文本值时，请为该值加引号。
向 JavaScript 变量赋值
通过赋值语句向 JavaScript 变量赋值：
x=5;
carname=\"Volvo\";
变量名在 = 符号的左边，而需要向变量赋的值在 = 的右侧。
在以上语句执行后，变量 x 中保存的值是 5，而 carname 的值是 Volvo。 向未声明的 JavaScript 变量赋值
如果您所赋值的变量还未进行过声明，该变量会自动声明。 这些语句： x=5;
carname=\"Volvo\";
与这些语句的效果相同：
var x=5;
var carname=\"Volvo\"; 重新声明 JavaScript 变量
如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。
var x=5; var x;
在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。
JavaScript 算术
正如代数一样，您可以使用 JavaScript 变量来做算术：
y=x-5; z=y+5;
在本教程的下一节中，您将学习能够在 JavaScript 变量间使用的运算符。 3.3 消息框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。 3.3.1 警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。 语法：
alert(\"文本\")
3.3.2 确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。 语法： confirm(\"文本\") 3.3.3 提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。 如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。 语法：
prompt(\"文本\默认值\")
3.4 函数
JavaScript 函数
将脚本编写为函数，就可以避免页面载入时执行该脚本。
函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。 你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。
函数在页面起始位置定义，即
部分。3.4.1 如何定义函数 创建函数的语法：
function 函数名(var1,var2,...,varX)
{
代码．．． }
var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。 注意：无参数的函数必须在其函数名后加括号： function 函数名() {
代码．．． }
3.4.2 return 语句
return 语句用来规定从函数返回的值。
因此，需要返回某个值的函数必须使用这个 return 语句。 例子
下面的函数会返回两个数相乘的值（a 和 b）： function prod(a,b) {
x=a*b return x
}
当您调用上面这个函数时，必须传入两个参数：
product=prod(2,3)
而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中。
3.4.3 JavaScript 变量的生存期
当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。 如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。 4 高级部分：JavaScript面向对象技术
JavaScript 是面向对象的编程语言 (OOP)。
OOP 语言使我们有能力自定义对象和变量类型。 4.1 面向对象术语
对象
ECMA-262 把对象（object）定义为“属性的无序集合，每个属性存放一个原始值、对象或函数”。严格来说，这意味着对象是无特定顺序的值的数组。
尽管 ECMAScript 如此定义对象，但它更通用的定义是基于代码的名词（人、地点或事物）的表示。
类
每个对象都由类定义，可以把类看做对象的配方。类不仅要定义对象的接口（interface）（开发者访问的属性和方法），还要定义对象的内部工作（使属性和方法发挥作用的代码）。编译器和解释程序都根据类的说明构建对象。 实例
程序使用类创建对象时，生成的对象叫作类的实例（instance）。对类生成的对象的个数的唯一限制来自于运行代码的机器的物理内存。每个实例的行为相同，但实例处理一组独立的数据。由类创建对象实例的过程叫做实例化（instantiation）。
在前面的章节我们提到过，ECMAScript 并没有正式的类。相反，ECMA-262 把对象定义描述为对象的配方。这是 ECMAScript 逻辑上的一种折中方案，因为对象定义实际上是对象自身。即使类并不真正存在，我们也把对象定义叫做类，因为大多数开发者对此术语更熟悉，而且从功能上说，两者是等价的。 面向对象语言的要求
一种面向对象语言需要向开发者提供四种基本能力：
封装 - 把相关的信息（无论数据或方法）存储在对象中的能力 聚集 - 把一个对象存储在另一个对象内的能力
继承 - 由另一个类（或多个类）得来类的属性和方法的能力 多态 - 编写能以多种方法运行的函数或方法的能力
ECMAScript 支持这些要求，因此可被是看做面向对象的。 对象的构成
在 ECMAScript 中，对象由特性（attribute）构成，特性可以是原始值，也可以是引用值。如果特性存放的是函数，它将被看作对象的方法（method），否则该特性被看作对象的属性（property）。 4.2 对象应用
对象的创建和销毁都在 JavaScript 执行过程中发生，理解这种范式的含义对理解整个语言至关重要。 声明和实例化
对象的创建方式是用关键字 new 后面跟上实例化的类的名字： var oObject = new Object();
var oStringObject = new String();
第一行代码创建了 Object 类的一个实例，并把它存储到变量 oObject 中。第二行代码创建了 String 类的一个实例，把它存储在变量 oStringObject 中。如果构造函数无参数，括号则不是必需的。因此可以采用下面的形式重写上面的两行代码： var oObject = new Object; var oStringObject = new String; 对象引用
在前面的章节中，我们介绍了引用类型的概念。在 ECMAScript 中，不能访问对象的物理表示，只能访问对象的引用。每次创建对象，存储在变量中的都是该对象的引用，而不是对象本身。
对象废除
ECMAScript 拥有无用存储单元收集程序（garbage collection routine），意味着不必专门销毁对象来释放内存。当再没有对对象的引用时，称该对象被废除（dereference）了。运行无用存储单元收集程序时，所有废除的对象都被销毁。每当函数执行完它的代码，无用存储单元收集程序都会运行，释放所有的局部变量，还有在一些其他不可预知的情况下，无用存储单元收集程序也会运行。
把对象的所有引用都设置为 null，可以强制性地废除对象。例如： var oObject = new Object;
// do something with the object here
oObject = null;
当变量 oObject 设置为 null 后，对第一个创建的对象的引用就不存在了。这意味着下次运行无用存储单元收集程序时，该对象将被销毁。
每用完一个对象后，就将其废除，来释放内存，这是个好习惯。这样还确保不再使用已经不能访问的对象，从而防止程序设计错误的出现。此外，旧的浏览器（如 IE/MAC）没有全面的无用存储单元收集程序，所以在卸载页面时，对象可能不能被正确销毁。废除对象和它的所有特性是确保内存使用正确的最好方法。
注意：废除对象的所有引用时要当心。如果一个对象有两个或更多引用，则要正确废除该对象，必须将其所有引用都设置为 null。 早绑定和晚绑定
所谓绑定（binding），即把对象的接口与对象实例结合在一起的方法。
早绑定（early binding）是指在实例化对象之前定义它的属性和方法，这样编译器或解释程序就能够提前转换机器代码。在 Java 和 Visual Basic 这样的语言中，有了早绑定，就可以在开发环境中使用 IntelliSense（即给开发者提供对象中属性和方法列表的功能）。ECMAScript 不是强类型语言，所以不支持早绑定。
另一方面，晚绑定（late binding）指的是编译器或解释程序在运行前，不知道对象的类型。使用晚绑定，无需检查对象的类型，只需检查对象是否支持属性和方法即可。ECMAScript 中的所有变量都采用晚绑定方法。这样就允许执行大量的对象操作，而无任何惩罚。 4.3 对象类型
在 ECMAScript 中，所有对象并非同等创建的。
一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。
本地对象
ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括： Object Function Array String Boolean Number Date RegExp Error EvalError
RangeError ReferenceError SyntaxError TypeError URIError
内置对象
ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。
宿主对象
所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。
所有 BOM 和 DOM 对象都是宿主对象。