3.3.2标记名称与小于号之间不能留有空格。

正确：

欢迎光临我的文学小屋！

错误：< p>欢迎光临我的文学小屋！

3.3.3标记和属性的名称都必须使用小写。

正确：

错误：

12

错误：

3.3.4属性值必须使用双引号。

正确：首页

错误：首页

3.3.5 标记被正确的嵌套使用。

正确：

《登鹳雀楼》是唐朝王之涣的诗。

错误：

《登鹳雀楼》是唐朝王之涣

3.3.6关闭双标记。

正确：

欢迎光临文学小屋！

以下是最新作品。

错误：

欢迎光临文学小屋！

以下是最新作品。

3.3.7关闭单标记。

正确：

错误：

3.3.8属性不能被缩减。

正确：

错误：

13

第 4 章 CSS基础知识

4.1 CSS 简介

CSS 是 Cascading Style Sheets 的缩写，译为“层叠样式表”。

HTML 控制网页的结构，CSS 控制网页的表现。

CSS 实现了网页的结构与表现相分离。

4.2 在网页中应用 CSS

在网页上应用CSS的三种方法：







行内样式

内部样式表

外部样式表

4.2.1 行内样式

行内样式：在 HTML 标记的 style 属性中设置 CSS 样式。

例：

泡泡潜水俱乐部

4.2.2 内部样式表

内部样式表：将 CSS 样式写在 标记之间。

例：

泡泡潜水俱乐部

泡泡潜水俱乐部为你量身打造一流的潜水服务，……

14

4.2.3 外部样式表

外部样式表：将 CSS 样式写在独立的 CSS 文件中，然后将 CSS 文件链接到 HTML 文件上。

例：

泡泡潜水俱乐部

泡泡潜水俱乐部为你量身打造一流的潜水服务，……

思考：在制作大型网站时，行内样式、内部样式表和外部样式表，哪一种CSS应用方式更合适，为什么？

答：应使用外部样式表。多个网页可以共用一个外部样式表文件，提高网站制作和修改的效率。

4.3 CSS 基本语法

4.4 CSS 选择器

CSS 常用选择器的类型：















通配选择器

标记选择器

ID 选择器

后代选择器

类选择器

伪类

群选择器

15

4.4.1 通配选择器

通配选择器：选择所有元素。

* { property: value; }

例：

* {

padding: 0;

margin: 0;

}

4.4.2 标记选择器

标记选择器：选择指定标记的元素。

Tag { property: value; }

例：

body {

font: 0.75em "宋体";

background: #E0E0E0 url(images/);

}

h1 {

font-size: 180%;

}

p {

margin: 0.8em 0;

}

4.4.3 ID 选择器

ID 选择器：选择 id 属性为指定值的元素。

＃ID { property: value; }

例：

#container {

width: 760px;

margin: auto;

}

#header {

height: 120px;

background: url(images/bg_) no-repeat;

}

16

4.4.4 后代选择器

后代选择器：选择指定父元素中包含的指定子孙元素。

selector1 selector2 { property: value }

例：

#content p {

}

text-indent: 2em;

4.4.5 类选择器

类选择器：选择 class 属性为指定值的元素。

.className { property: value; }

使用类选择器需要两个步骤：① 为网页元素添加 class 属性；② 定义样式。

例：

《秋夜》

鲁迅

在我的后园，可以看见墙外有两株树，……

4.4.6 群选择器

群选择器：同时选择多种指定的元素。

selector1，selector2，selector3 { property: value; }

例：

h2, h3 {

margin: 1em 0;

}

td, th {

border: solid 1px #000000;

}

17

padding: 5px;

4.4.7 伪类

伪类：选择处于某种状态下的指定元素。

selector : pseudo-class { property: value }

例：

a:link {

color: #000000;

text-decoration: none;

}

a:visited {

color: #000000;

text-decoration: none;

}

a:hover {

color: #FF0000;

text-decoration: underline;

}

a:active {

color: #FF0000;

text-decoration: underline;

}

注意：一定要按照 link，visited，hover，actived 的顺序书写。

4.5 CSS 的继承性

继承性是指父元素的某个属性对于其子元素也起作用。常用的具有继承性的属性：

font-family font-size font-weight line-height color text-align

text-indent

4.6 层叠和特殊性

选择器的特殊性分成四个等级：

选择器

行内样式

ID选择器

类选择器、伪类选择器

标记选择器

18

特殊性

1000

100

10

1







用行内样式具有最高特殊性。

“ID选择器”比“类选择器”特殊。

“类选择器”比“标记选择器”特殊。

例1：

选择器

style=“ ”

#container #content{ }

#content .center{ }

#content p{ }

#content{ }

{ }

.center{ }

p{ }

例2：判断每一行文字的颜色。

泡泡潜水俱乐部

泡泡潜水俱乐部为您量身打造一流的潜水服务。

19

特殊性

1000

200

110

101

100

11

10

1

第 5 章 CSS 盒模型

5.1 盒模型概述

5.1.1 盒模型的概念

CSS 将所有的网页元素都看做是一个矩形框，这个框由元素的内容、填充（padding）、边框（border）和边界（margin）组成。

填充（padding） 是元素的内容与边框之间的空间。

边界（margin） 是一个元素和另一个元素之间的间隔。

5.1.2 盒的类型

CSS 把盒子分为两种基本形态：

1．块状元素：独占一行，默认状态下，宽度为100％。

常用的块状元素：















body

p

h1~h6

ul，ol，li

table

form

div

2．行内元素：在行内流动，没有高度和宽度。

常用的行内元素：











em，strong

img

a

input，button，label

span

20

5.1.3 理解盒模型

padding 区域在边框之内，margin 区域在边框之外。

padding 区域应用背景，margin 区域不应用背景。

元素不设置边框和背景时，不能分辨 padding 与 margin。

5.2 盒的尺寸

5.2.1 元素总宽度

元素的总宽度 = 左边界 + 左边框 + 左填充 + width + 右填充 + 右边框 + 右边界

5.2.2 元素的总高度

元素的总高度 = 上边界 + 上边框 + 上填充 + height + 下填充 + 下边框 + 下边界

21

5.2.3 计算实例

例：

5.3 边框（border）

5.3.1 边框

每个元素可以设置 4 个方向的边框。

border-top

border-right

border-bottom

border-left

5.3.2 边框的属性

每条边框有 3 种属性：

边框宽度 border-width

边框颜色 border-color

边框样式 border-style

5.3.3 边框样式（border-style）

border-style 属性的常用值：

22

solid 实线

dotted 点线

dashed 虚线

double 双线

none 无边框，默认值

5.3.4 边框属性的设置

例：同时设置 4 个边框

border: solid 4px #FF0000;

例：单独设置下边框

border-bottom: double 6px #000000;

5.4 填充（padding）

5.4.1 填充

padding 区域在边框之内。

padding 区域应用背景。

5.4.2 设置填充的值

可以单独设置1个方向的填充。例：

padding-left: 8px;

也可以同时设置 4 个方向的填充。例：

padding: 2px 4px 6px 8px; /*上，右，下，左*/

padding: 2px 4px 6px; /*上，左右，下 */

padding: 2px 4px; /*上下，左右*/

padding: 2px; /*上下左右*/

23

5.4.3 填充的特殊作用

填充常用于创建一个呈现背景的区域。

例：

ul {

background: url(images/) no-repeat center bottom;

padding-bottom: 100px;

}

li {

background: url(images/) no-repeat left top;

padding-left: 20px;

}

5.5 边界（margin）

5.5.1 边界

margin 区域在边框之外。

margin 区域不应用背景。

5.5.2 设置边界的值

可以单独设置1个方向的边界。

margin-bottom: 6px;

也可以同时设置4个方向的边界。

margin: 2px 4px 6px 8px; /*上，右，下，左*/

24

5.5.3 垂直边界重叠

当两个块元素的垂直边界相遇时，它们将发生重叠。

5.5.4 父子垂直边界重叠

当父元素的填充、边框均为 0 时，父元素与子元素的边界重叠。

避免父子垂直边界重叠的方法是，给父元素设置1px填充或边框，将父子元素的边界分隔开。

25

5.6 盒的高度与文本溢出







如果盒子不设置高度，当内容增加时，盒子会自动增加高度以适应内容。

如果盒子设置了高度，当内容增加时，盒子不会增加高度，而是让内容溢出盒子。

但是 IE6 浏览器对盒子的高度作了错误的解析，即使盒子设置了高度，它也让盒子自动增加高度以适应内容。

例：

#box {

width: 300px;

height: 150px;

border: 1px solid #000000;

background: #CCFFCC;

}

标准浏览器“让内容溢出” IE浏览器“自适应”

5.6.4 控制文本溢出方式

对于标准浏览器，可以使用CSS的overflow 属性来控制内容的溢出方式。

overflow: visible 默认值，让溢出的内容显示。

overflow: scroll 添加滚动条。

overflow: auto 在内容溢出的时候添加滚动条。

overflow: hidden 隐藏任何溢出的内容

26

第 6 章 用CSS设置文本和图像样式

6.1 对文字应用样式

6.1.1 文字的属性

属性

font-family

font-size

font-weight

描述

字体

字号

加粗

值

值

normal, bold（粗体）, bolder（特粗）,

lighter（细体）

font-style

font-variant

line-height

text-transform

color

text-decoration

样式

变形

行高

转换

颜色

装饰

normal, italic（斜体）, oblique（倾斜）

normal, small-caps（小型的大写字母）

值

none, capitalize（首字母大写）,

uppercase（大写）, lowercase（小写）

值

none, blink（闪烁）, underline（下划线）,

line-through（穿越线）, overline（上划线）

可用值

6.1.2 文字属性缩写

font: font-style | font-variant | font-weight | font-size | / line-height | font-family

例：

body {

font: italic small-caps bold 0.75em/1.5 Arial, Helvetica, sans-serif;

}

注意：

1．可以省略 font 属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。但至少要定义 font-size 和 font-family两个值。

27

2．由于font-size和line-height的属性值都是数值型，因此采用如下方式进行区分：如果只有一个数值型的值，则该值表示font-size。如果有两个，则按照font-size/line-height的方式书写，即二者之间用斜杠隔开。例：

body {

font: 0.75em/1.5em “宋体”;

}

6.1.3 字体设置技巧

1．中文网页使用“宋体”。

2．当字体名称中有空格，或由汉字组成时，要使用引号包围该名称。例：

font-family: “宋体”;

font-family: “Times New Roman”, Times, serif;

3．提供首选字体、备用字体和普通字体。例：

font-family: Verdana, Arial, Helvetica, sans-serif;

4．常用的英文普通字体包括：serif、sans-serif、 monospace。

（1）serif是成比例、有衬线的字体。 （2）sans-serif 是成比例、无衬线的字体。

（3）monospace 是等宽的字体。

28

6.1.4 字号设置技巧

1．不应以像素为单位设置字号。为了保证网页文字的大小可调节，应该使用 em 为单位设置字号。默认情况下 1em=16px，则 0.75em=12px。

2．font-size 属性具有继承性，当多层嵌套定义时应谨慎。例：

7．制作网页时，应利用好 font-size 属性的继承性，避免字号的重复定义。如果需要对 h1、h2 等元素的大小进行定义，最好使用百分比为单位。例：

6.1.5 line-height属性

1．浏览器默认的行高为1.2。适当地增加行高，可以提高文字阅读的舒适程度。

2．如果用px作单位设置行高，行高的大小是固定的。例：

body {

font-family: “宋体”;

font-size: 12px;

line-height: 23px;

}

#p2 {

}

#p3 {

}

29

→行高23px

→行高23px

font-size: 14px;

→行高23px

font-size: 16px;

3．如果用em或%作单位设置行高，行高要根据字号进行计算。其子元素会继承这个计算出来的固定值。例：

body {

font-family: “宋体”;

font-size: 12px;

line-height: 1.5em;

}

#p2 {

}

#p3 {

}

4．如果用没有单位的倍数设置行高，行高要根据字号进行计算。但其子元素只继承行高倍数，并用这个倍数根据自身的字号对行高进行重新计算。例：

body {

font-family: “宋体”;

font-size: 12px;

line-height: 1.5;

}

#p2 {

}

#p3 {

}

font-size: 16px;

font-size: 14px;

font-size: 16px;

font-size: 14px;

→行高18px

→行高18px

→行高18px

→行高18px

→行高21px

→行高24px

6.2 对段落应用样式

6.2.1 段落的属性

属性

word-spacing

letter-spacing

描述

单词间距

字母间距

可用值

normal, 值 *对中文无效

normal, 值 *对中文有效

30

行内元素vertical-align 在行内的垂直对齐

text-align 文本的水平对齐

text-indent

white-space

display

首行缩进

空白

显示方式

baseline（基线）, sub（下标）, super（上标）, top（顶部）,

text-top（文本顶部）, middle（中线）, bottom（底部）,

text-bottom（文本底部）

left, right, center, justify（两端对齐）

值

normal, pre（保留空白）, nowrap（不换行）

none（不显示），inline（显示为行内元素），

block（显示为块元素）

6.2.2 text-index属性

1．text-index属性设置为正值，会使首行缩进；设置为负值，会使首行突出。

2．text-index属性值用em和%作单位，效果不同。em是相对于文字的大小，%是相对于父元素的宽度。例：

#p1 {

}

#p2 {

}

#p3 {

}

text-indent: 50%;

text-indent: -2em;

text-indent: 2em;

6.2.3 vertical-align属性

vertical-align 属性只对行内元素有效。

vertical-align : baseline | top | middle | bottom | text- top | text-bottom | sub | super

1．设置行内 与文字的垂直对齐方式。

2．设置 、、 中文字的垂直对齐方式。

3．设置文字的上标、下标。

6.2.4 white-space属性

white-space属性用来处理元素之内的空白。空白包括空格、制表符或换行符。

31

1．white-space属性值为normal，压缩空白为一个空格，文字自动换行。

2．white-space属性值为nowrap，压缩空白为一个空格，文字不换行。

3．white-space属性值为pre，保留空白并按原格式输出。例：

#p1 {

}

#p2 {

}

#p3 {

}

white-space:pre;

white-space:nowrap;

white-space:normal;

6.3 对列表应用样式

6.3.1 列表的类型

1．项目列表

• 北京
• 上海

2．编号列表

1. 北京
2. 上海

6.3.2 列表的属性

属性 描述

none

disc（圆点，默认值）

circle（圆圈）

list-style-type 项目符号的样式 square（方块）

decimal（数字）

lower-roman（小写罗马数字）

upper-roman（大写罗马数字）

32

可用值

lower-alpha（小写字母）

upper-alpha（大写字母）

list-style-image

list-style-position

项目符号的图像

项目符号的位置

none, 值

outside（外，默认值）,

inside（内）

6.3.3 列表属性缩写

list-style: list-style-type | list-style-position | list-style-image

6.3.4 列表在不同浏览器中的差异

IE 默认设置

具有 margin-left 值。

FF 默认设置

具有 padding-left 值。

项目符号的大小与位置也不同。

6.3.5 让列表在不同的浏览器中表现一致

ul {

}

33

margin: 0px;

padding: 0px;

list-style: none;

6.3.6 用背景图像替代项目符号

设置了 list-style:none 后，可以利用背景图像替代项目符号。

ul {

}

li {

background: url(images/) no-repeat left top;

padding-left: 20px;

}

margin: 0px;

padding: 0px;

list-style: none;

6.4 对链接应用样式

6.4.1 简单的链接样式

a {

color: #000000;

}

上面的样式设置网页上超链接的全部状态都为黑色。

6.4.2 使用伪类选择器找到链接的不同状态

a:link, a:visited {

color: #000000;

text-decoration: none;

}

a:hover, a:active {

color: #FF0000;

text-decoration: underline;

}

注意：要按照 a:link, a:visited, a:hover, a:active 的顺序为链接应用样式。

34

6.4.3 使用后代选择器找到特定区域中的链接

#navigation a {

color: #FFFFFF;

}

#navigation a:hover {

color: #FF0000;

}

6.4.4 让链接看起来像按钮：Pixy 方法，消除闪烁

{

}

a: {

color:#FFFFFF;

}

background-position: right top;

color:#000000;

text-decoration:none;

display: block;

width: 150px;

height: 40px;

line-height: 40px;

background: url(images/) no-repeat left top;

padding-left: 50px;

6.5 对图像应用样式

6.5.1 网页中的图像分类

35

1．有意义的图像









网站LOGO

新闻图片

商品图片

广告图片

2．装饰性图像







图案

花边

艺术字

6.5.2 网页中应用的图像的两种方法

1．将“有意义的图像”插入 HTML 文件中

2．将“装饰性图像”写入 CSS 文件中

body {

background: url(images/) no-repeat right bottom;

}

6.5.4 对HTML中的图像应用CSS

1．去掉图像超链接的默认边框

img {

}

2．加边框

.pic {

}

3．图文混排

.fltrt {

}

36

border: none

padding: 10px;

border: solid #999999 1px;

background: #E8E8E8;

float: right;

margin-left: 10px;

第 7 章 用CSS设置网页背景

7.1 CSS 背景属性概述

7.1.1 CSS 背景属性

属性

background-color

background-image

background-repeat

描述

背景颜色

背景图像

重复方式

可用值

transparent, 值

none, 值

repeat, repeat-x, repeat-y,

no-repeat

水平位置：left, center, right, 值

background-position 背景图像的位置

垂直位置：top, center, bottom, 值

scroll（背景图像随网页滚动）

background-attachment 附加方式

fixed（只能用于 body 元素，背景图像在浏览器视口固定不动，）

说明：

1．在 CSS 2.0 中，一个元素只能应用一个背景图像。

2．背景图像应用在元素的“内容”和“填充”区域。

3．如果一个元素同时应用了背景颜色和背景图像，那么背景图像将位于背景颜色之上。

4．子元素的背景位于父元素的背景之上。

5．设置 background-position 属性时，要先设置水平位置，再设置垂直位置。

6．background-attachment: fixed 只能用于 body 元素，作用是使 body 的背景图像以“浏览器视口”定位，且固定不动。

7.1.2 背景属性缩写

background: background-color | background-image | background-repeat

| background-position | background-attachment ;

可以省略 background 属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。默认值为：

background-color: transparent

background-image: none

background-repeat: repeat

background-position: left top

background-attachment: scroll

37

练习1：请分析下面的代码省略了哪些属性值？

body {

background: url(images/);

}

答：上面的代码相当于

body {

background: transparent url(images/) repeat left top scroll;

}

练习2：请分析下面的代码运行结果是什么？

body {

background: url(images/);

background: #000000;

}

答：上面的代码相当于

body {

background: transparent url(images/) repeat left top scroll;

background: #000000 none repeat left top scroll;

}

因此，以上代码运行后，网页背景色为黑色，无背景图像。

7.1.3 设置背景图像位置的方法

1. 用关键字设置背景图像的位置

使用“对齐规则”，背景图像的 X 边与元素的 X 边对齐。

background: url(images/) no-repeat right bottom;

38

2. 用像素设置背景图像的位置

使用“坐标规则”，坐标原点是元素 padding 区域的左上顶点，坐标的正轴方向指向元素内部。

background: url(images/) no-repeat 20px 20px;

3. 用百分比设置背景图像的位置

使用“对应规则”，背景图像的百分比位置与元素的百分位置相对应。

background: url(images/) no-repeat 20% 20%;

7.2 制作垂直渐变的背景

创建垂直渐变背景的方法是：将渐变图像应用于 body 元素，并让它水平重复（repeat-x）；同时，给网页添加一个背景色，背景色与渐变图像底部的颜色相同。

7.3 用背景图像替换文本

例1：

HTML

css Zen Garden

The Beauty of CSS Design

39

CSS

#header {

}

#header h1, #header h2 {

}

display: none;

height: 300px;

background: url(images/);

例2：

HTML

The Road to Enlightenment

……

CSS

#preamble h3 {

}

height: 40px;

background: url(images/);

text-indent: -9999px;

7.4 制作圆角框

40

HTML

CSS

#box {

}

#box h3 {

}

#box ul {

}

#box li {

}

background: url(images/) no-repeat left top;

padding-left: 20px;

border-bottom: 1px dashed #000000;

margin: 10px 0;

list-style: none;

background: url(images/) repeat-y left top;

padding: 1px 15px;

color:#FFFFFF;

background: url(images/) no-repeat left top;

padding: 5px 15px;

width: 190px;

background: url(images/) no-repeat left bottom;

padding-bottom: 15px;

41

7.5 应用 PNG 图像

IE6 不支持 半透明的 PNG 图像。因此，需要使用过滤器专门设置应用了PNG 背景图像的元素在 IE6 中不显示。

#extraDiv {

}

* html #extraDiv {

display: none;

}

width: 770px;

height: 184px;

background: url(images/) no-repeat top left;

position: fixed;

left: 0;

top: 0;

42

第 8 章 浮动布局

8.1 固定宽度网页布局

1．固定宽度居左

#container {

width: 760px;

}

2．固定宽度居中

#container {

width: 760px;

margin: 0 auto;

}

3．固定宽度居右

#container {

width: 760px;

margin: 0 0 0 auto;

}

8.2 网页元素的三种位置

1．普通流

2．浮动

3．定位

8.3 浮动的概念

8.3.1 浮动（float）

浮动的方式

取值

float : left

float : right

float : none

向左边浮动

向右边浮动

不浮动

说明

8.3.2 清理浮动（clear）

43

清理浮动的方法

取值

clear : both

clear : left

clear : right

说明

为两边的浮动元素让开足够的空间

为左边的浮动元素让开足够的空间

为右边的浮动元素让开足够的空间

8.3.3 认识浮动

1．如果让一个元素浮动，它会向左或者向右浮动直至遇到父元素的边缘。如果向同一方向再浮动一个元素，它会浮动直至遇到前一个浮动元素的边缘。

2．如果向同一方向浮动多个元素，它们将一个挨一个排列，当水平空间无法容纳更多的浮动元素时，浮动元素会换行排列。

3．浮动元素离开了正常的文档流。浮动元素之后的块状元素将忽略它并占据它原来的空间。行内元素（文字）会围绕在浮动元素周围。

4．应该为浮动元素设定宽度。如果不设定宽度，浮动元素有宽度最小化的趋势，在不同的浏览器中会有不同的结果。

5．浮动元素的垂直边距（margin）不会重叠。

6．如果不希望浮动元素对后面的元素产生影响，可以为后面的元素应用“clear”属性。

7．具有“clear”属性的元素不可以和前面的浮动元素重叠。“clear”属性所带来的清理效果是使元素上方产生空白区域，推动元素向下越过浮动元素。

8．如果为清理元素设置“margin-top” 属性，该属性不起作用。因此应避免为清理元素设置 “margin-top” 属性。

9．IE6 对清理元素的“margin-top”属性作出了错误解析。

8.3.4 IE6 浮动元素双倍边界 bug

1．IE6.0 错误地将浮动元素与父元素之间的边界加倍，称为 IE 浮动元素双倍边界 bug。

2．修复 IE 浮动元素双倍边界 bug 的方法是为浮动元素设置display:inline。

8.3.5 浮动元素的垂直位置及影响范围

1．浮动元素的垂直位置由它原来所处文档流的位置决定。浮动元素只能从原来位置水平地向左或向右浮动，不可能斜向上或斜向下浮动。

2．浮动元素不对其前面的元素产生影响，而只对其后面的元素产生影响。

8.3.6 浮动的子元素

1．父元素不能包含浮动的子元素。

2．迫使父元素包含子元素的方法：

方法一：为父元素设置 overflow: hidden。对于 IE6浏览器，需要为父元素设置zoom: 1。

方法二：利用一个子元素清除浮动。

44

8.4 两列浮动布局

两列布局网页的逻辑结构

…

…

…

…

两列浮动布局－－方法1

#sidebar {

width: 280px;

float: left;

}

#content {

margin-left: 280px;

}

#footer {

clear:both;

}

两列浮动布局－－方法2

#sidebar {

width: 280px;

float: left;

}

#content {

width: 500px;

float: right;

}

45

#footer {

clear: both;

}

8.5 三列浮动布局

三列布局网页的逻辑结构

…

…

…

…

…

三列浮动布局－－方法1

#sidebar1 {

float: left;

width: 190px;

}

#content {

float: left;

width: 400px;

}

#sidebar2 {

float: right;

width: 190px;

}

#footer {

clear: both;

}

三列浮动布局－－方法2

#sidebar1 {

46

float: right;

width: 190px;

}

#content {

float: right;

width: 400px;

}

#sidebar2 {

float: left;

width: 190px;

}

#footer {

clear: both;

}

8.6 伪列

创建伪列的方法是在 container 元素上应用一个垂直重复的背景图像。

#container {

background: url(images/) repeat-y;

}

47

第 9 章 定位布局

9.1 定位的概念

9.1.1 定位

定位是指通过选取适合的参照物，并设置 left 或 right、top 或 bottom 属性，来确定元素在网页中的位置。

position: relative | absolute | fixed

属性值

position: relative

position: absolute;

position: fixed;

1．相对定位









position: relative;

相对定位是指元素相对于它的原始位置定位。

相对定位元素仍然保留它在文档流中的原始位置。

如果不设置宽度，相对定位元素的宽度保持原来大小。

含义

相对定位

绝对定位

固定定位

说明

元素相对于它的原始位置定位。

元素相对于已定位的祖先元素定位。

元素相对于浏览器视口定位。

2．绝对定位





position: absolute;

绝对定位是指元素相对于最近的已定位的祖先元素定位。如果不存在已定位的祖先元素，则相对于浏览器视口定位。





绝对定位元素放弃它在文档流中的原始位置。

如果不设置宽度，绝对定位元素的宽度收缩至最小。

3．固定定位





position: fixed;

固定定位是指元素相对于浏览器视口定位。固定定位的元素固定在浏览器视口的某个位置，不随网页滚动。







固定定位元素放弃它在文档流中的原始位置。

如果不设置宽度，固定定位元素的宽度收缩至最小。

IE6 浏览器不支持固定定位。

练习题：三种定位方式的比较

48

9.1.2 定位坐标系

定位坐标系有四种。

坐标系的坐标原点位于参照物元素的 padding 区域外边缘，坐标轴的正值方向指向参照物的内部。

定位元素的定位点位于定位元素的 margin 区域外边缘。

1．left-top 坐标系

当元素使用 left、top 属性定位时，采用 left-top 坐标系。

2．left-bottom 坐标系

当元素使用 left、bottom 属性定位时，采用 left-bottom 坐标系。

49