前端文本样式属性和定位

1. 文本格式化

本章主要讲解如何实现文本的格式化，包括控制文本的字体（如字体大小、字体样式和字体系列等）和设置文本的格式（如文本颜色、文本排列和文本缩进等）。

1.1. 文本格式化

1.1.1. 控制字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）等，这些属性会直接影响字体及其外观。常用的属性有：

1、指定字体（font-family）

可以使用font-family属性指定文本的字体，语法如下：

font-family:name/inherit;

如果需要指定字体，则设置值为name，即首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。如果字体名称包含非ASCII字符，就必须声明样式表的编码。

这个属性最大的问题在于，如果用户机器上并没有安装所需要的字体，则会显示默认字体。因此，在指定字体时，最好同时指定多种字体用于替代。

我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体作为替代字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器会使用默认字体显示页面。

我们可以结合特定字体和通用字体系列来指定字体，如：

h1 {font-family: Georgia, serif;}

如果用户机器上者没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），浏览器就可能对 <h1> 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。

2、字体大小（font-size ）

font-size 属性用来设置文本的大小。如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

可以使用多种方式指定这个属性的值：绝对大小、相对大小、长度单位和百分比。其中，如果使用长度单位来设置字体大小，还可以分别使用相对单位和绝对单位。

长度是指采用一种长度单位来表达字体的大小。可使用的绝对单位如表－1所示。

表－1 长度的绝对单位

图－1给出了使用长度的绝对单位来设置字体大小的效果。

图-1

也可以使用相对单位的长度来设置字体大小，可使用的相对单位如表－2所示。

表－2 长度的相对单位

如果需要使用相对单位来设置大小，我们可以使用px，表示像素。通过像素设置文本大小，可以对文本大小进行完全控制。比如，我们可以这样设置：

h1 {font-size:60px;}

h2 {font-size:40px;}

p {font-size:14px;}

font-size 属性的值还可以设置为“inherit”，规定应该从父元素继承字体尺寸。

3、字体加粗（font-weight）

font-weight属性用于设置文本的粗细，常用于实现将显示元素的文本中所用的字体加粗。

该属性可能的值如表－3所示。

表－3 font-weight属性的取值

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

比如，我们可以这样定义样式规则：

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

然后查看如下代码：

<p>font-weight:normal</p>

<p>font-weight:bold</p>

<p>font-weight:900</p>

上述代码在浏览器中的显示效果如图-2所示。

图-2

其中，bold是最常用的值，也会遇到使用normal的情况，尤其是在大量加粗文本中创建不同效果的文本时。

1.1.2. 控制文本格式

CSS除了可以设置字体，还可以定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

1、文本颜色（color）

color 属性用于设置文本的颜色，即元素的前景色。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。

没有设置color属性的文本将使用浏览器的默认颜色显示。如果需要使用该属性设置文本颜色，该属性的值可以是颜色名称、rgb 值或者十六进制数，其默认值取决于浏览器。

比如，我们可以这样设置：

p {color: rgb(255,255,0);}

或者

p {color: #FFFF00;}

2、文本排列（text-align）

text-align 是一个基本的属性，用于设置一个元素中的文本行互相之间的对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。该属性可能的取值如表－4所示。

表－4 text-align属性的取值

前 3 个值相当直接，不用额外解释。

text-align属性还可能取值 justify，我们称为两端对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。这种两端对齐的排列方式经常用于打印。

比如，我们可以这样定义样式规则：

td.leftAlign {text-align:left;}

td.rightAlign {text-align:right;}

td.centerAlign {text-align:center;}

td.justifyAlign {text-align:justify;}

然后，查看如下代码：

<tr>

<td>With sunshine, water, and careful tending, roses will bloom several times in a season.</td>

</tr>

<tr>

<td>With sunshine, water, and careful tending, roses will bloom several times in a season.</td>

</tr>

<tr>

<td>With sunshine, water, and careful tending, roses will bloom several times in a season.</td>

</tr>

<tr>

<td>With sunshine, water, and careful tending, roses will bloom several times in a season.</td>

</tr>

</table>

上述代码在浏览器中的显示效果如图-3所示。

图-3

由图－17可以看出，居左或者居右排列后，另外一端会显示为锯齿状（使用默认的字宽和间隔，以单词为单位换行）；而如果使用justify则会显示为两端对齐的效果。

3、文字修饰（text-decoration）

text-decoration 属性用于对文本进行修饰。它允许对文本设置某种效果，如加下划线、上划线或者闪烁等。

text-decoration属性可能的取值如表－5所示。

表－5 text-decoration属性的取值

underline 会对元素加下划线；而overline 的作用恰好相反，会在文本的顶端画一个上划线；值 line-through 则在文本中间画一个贯穿线，;blink 会让文本闪烁。

还可以在一个规则中结合多种装饰，只需要为text-decoration属性设置多个值，且多个值之间用空格隔开。

比如，如果一个段落中的文本既有下划线，又有上划线，我们可以这样定义：

p {text-decoration:underline overline;}

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但某些元素例外。比如，链接默认地会有下划线。因此，如果希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

如果显式地用这样一个规则去掉链接的下划线，那么它与正常文本之间在视觉上的唯一差别可能就是颜色（浏览器往往会为链接设置默认的颜色）。

blink 值会创建闪烁的文本，但是这通常被认为是不赞成使用的方式，大部分浏览器也不支持它。

4、行高（line-height）

line-height 属性用于设置行间的距离，推荐设置1.5em-2em。

当处理大量文本时，增加文本行之间的垂直空间量可以提高文档可阅读性，这种空间量称为行间距。在Web页面中增加行间距是非常有用的。比如，如果文本行之间存在更多的空间，当达到一行的末尾之后，更容易发现下一行的起点。

line-height 属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离。

行间距是line-height 与 font-size 的计算值之差。行间距会被分为两半，分别加到一个文本行内容的顶部和底部。而可以包含这些内容的最小框就是行框。比如，我们可以这样定义样式规则：

p {border:1px solid red;}

p.smallLength {line-height: 10px;}

p.bigLength {line-height: 30px;}

然后，查看如下代码：

<p>这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 20px。这是拥有标准行高的段落。</p>

<p>length=10px。这个段落拥有更小的行高。这个段落拥有更小的行高。</p>

<p>length=30px。这个段落拥有更大的行高。这个段落拥有更大的行高。</p>

上述代码在浏览器中的显示效果如图-4所示。

图-4

5、首行文本缩进（text-indent）

把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

text-indent 属性缩进元素中的首行文本，即使用该属性可以让元素的第一行缩进一个给定的距离。这个属性最常见的用途是将段落的首行缩进，下面的规则会使段落的首行缩进 2 em：

p.first {text-indent: 2em;}

可以为块级元素应用 text-indent属性，但无法将该属性应用于行内元素，且图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

text-indent 属性除了可以使用长度单位，还包括百分比值。百分数是相对于缩进元素的父元素的宽度。即如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

比如，我们可以这样定义样式规则（为了更好的观察父元素的边界，我们定义了 <div> 元素的边框）：

div {

width: 400px;

border:1px solid red;}

p.indent {text-indent: 20%;}

然后，查看如下代码：

<div>

<p>This is a paragraph.This is a paragraph.This is a paragraph.</p>

<p>

This is a paragraph.This is a paragraph.This is a paragraph.

</p>

</div>

上述代码在浏览器中的显示效果如图-5所示（缩进值是父元素的 20%，即 80 个像素）：

图-5

6、鼠标指针类型（cursor）

可选值：Helper帮助样式； text文本样式； crosshair十字样式； wait等待样式。

2. 表格样式

2.1. 表格常用样式属性

2.1.1. 表格常用样式属性

对于表格而言，它可以使用前面章节中讲述的很多CSS样式（如背景色、边框和字体等），比如，可以使用 width 属性、height 属性设置单元格的大小；可以使用border 属性设置单元格的边框；可以使用padding 属性控制表格中内容与边框的距离；可以使用background 属性设置表格或者单元格的背景色以及背景图像；还可以使用文本格式化相关的样式属性来定义表格中的文本。

需要注意的是，除了background-color 属性和height 属性之外，最好避免将这些属性用于 <tr> 元素。因为这些属性用于表行时，浏览器对它们的支持并没有像它们用于单个单元格时那么好。

2.1.2. 垂直方向对齐

vertical-align 属性用于设置元素的垂直对齐方式，当操作内联元素时（比如图像或者普通文本），该属性非常有用。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

vertical-align 属性可能的取值有很多，但是该属性在用于表格单元格中的内容垂直对齐方式时可取的值如表－6所示。

表－6 vertical-align属性的取值

vertical-align 属性在用于表格单元格中的内容垂直对齐方式时，可以设置为顶部top、中部middle和底部bottom三个值。

比如，我们定义如下样式规则：

.top {vertical-align:top;}

.middle {vertical-align:middle;}

.bottom {vertical-align:bottom;}

td {width:200px;height:80px;border:1px solid red;}

然后，在页面的主体中添加如下代码：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

上述代码在浏览器中的显示效果如图-6所示。

图-6

表格单元格中内容的垂直对齐方式的默认值为middle，因此，图－1中表格的第一列的两个单元格中的文本都是垂直居中显示；而设置了top 值和bottom 值以后，可以设置单元格中内容位于单元格顶部或者底部显示。

另外，默认情况下，单元格中的文本在水平方向上居左显示，可以使用text-align 属性来修改其水平对齐方式。

2.2. 表格特有样式属性

除了上一节中讲述的那些属性以外，还有一些属性是只与表格相关的。这些仅与表格相关的样式属性可以极大的改善表格的外观。

2.2.1. 边框合并

从在前面的示例中不难发现，如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框（见图-6）。如果需要合并相邻的边框，则可以使用border-collapse 属性。

border-collapse 属性设置是否将表格边框折叠为单一边框，即是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

border-collapse 属性可能的取值如表－7所示。

表－7 border-collapse 属性的取值

border-collapse 属性的值如果设置为separate 值或者不设置，浏览器会独立显示每一个单元格的边框，即使两个相邻单元格具有不同类型的边框。

border-collapse 属性的值如果设置为collapse 值，则会对边框进行合并，即会基于一组内置的复杂规则来决定显示哪一个边框。一般情况下，浏览器会对边框进行折叠。

比如，我们定义如下样式规则：

table {border:2px dotted black;}

td {width:200px;height:50px;}

table.separate {border-collapse:separate;}

table.collapse {border-collapse:collapse;}

td.solid {border:3px solid silver;}

td.dashed {border:3px dashed gray;}

然后，在页面的主体中添加如下代码：

border-collapse:separate

<table>

<tr>

</tr>

</table>

<br />

border-collapse:collapse

<table>

<tr>

</tr>

</table>

上述代码在浏览器中的显示效果如图-7所示。

图-7

为了更好的查看效果，图-7中的相邻单元格使用了不同样式的边框。图-7中的第一个表格的border-collapse 属性使用了separate 值，则表格的边框、各单元格的边框都独立显示，即使相邻的单元格的边框样式不同。

第二个表格的border-collapse 属性使用了collapse 值，相邻的边框则会发生合并，边框会互相折叠。由图可见，实线边框的优先级高于虚线边框。

2.2.2. 边框边距

由前面的示例不难发现，在表格中的单元格之间存在一定的间距，如果希望控制这个间距，则可以使用border-spacing 属性。

border-spacing 属性设置相邻单元格的边框间的距离，但是仅限于分隔单元格边框，即border-collapse 属性为separate 值的情况下，也称为边框分离模式。

该属性的值可以是长度单位或者单词 inherit。如果设置为长度，则可以使用px、cm等单位，但是不允许使用负值；如果设置为inherit值，表示规定应该从父元素继承 border-spacing 属性的值。

设置border-spacing 属性的值为长度值时，可以为该属性指定一个或者两个值。

如果指定一个值，则该值同时应用于水平和垂直间距；如果指定两个值，那么第一个值指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开。

比如，我们定义如下样式规则：

table {border:2px dotted gray;}

td {

background-color:#f0f0f0;

width:200px;

height:50px;

border-collapse:separate;

border:1px solid black;}

table.singleSpacing {border-spacing:5px;}

table.doubleSpacing {border-spacing:10px 20px;}

然后，在页面的主体中添加如下代码：

<table>

<caption>设置一个值</caption>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

<table>

<caption>设置两个值</caption>

<tr>

</tr>

<tr>

</tr>

</table>

上述代码在浏览器中的显示效果如图-8所示。

图-8

由图-8可以看出，第一个表的border-spacing 属性只设置了一个值为5px，则单元格边框之间的垂直和水平间隔均为5 像素；而第二个表的border-spacing 属性设置了两个值，则单元格边框之间的水平间距为10 像素，而垂直间距较大，为20 像素。

需要注意的是，为了尽量能够在各浏览器中得到一致的显示效果，最好为 <table> 元素设置border-spacing 属性，而不是单元格等其他元素。

3. 浮动定位

3.1. 定位概述

3.1.1. 定位概述

CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局，还可以将布局的一部分与另一部分重叠，这样可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，即可以定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，而且各浏览器对 CSS2 中定位的支持远胜于对其它方面的支持。

CSS 有三种基本的定位机制：普通流定位、浮动和绝对定位。

其中，使用position 属性和偏移属性可以实现普通流定位（包括相对定位）和绝对定位（包括固定定位）；使用float 属性可以实现浮动定位。其他属性为辅助属性。

在后面的章节中，我们会详细讲解普通流定位、相对定位、绝对定位和浮动。

3.1.2. 普通流定位

默认情况下，通过使用称为普通流的方式在页面中布局元素。

在普通流中定位，页面中的块级元素框从上到下一个接一个地排列，且每一个块级元素都会出现在一个新行中（比如 <p> 元素、<div> 元素），元素框之间的垂直距离是由框的垂直外边距计算出来的。

内联元素将在一行中从左到右排列水平布置，不需要从新行开始。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

为了更好的理解普通流定位模式，我们定义如下样式规则：

p {

height:70px;

border:1px solid gray;

margin-top:20px;

padding-top:10px;}

div {

height:70px;

border:2px dashed black;

margin-top:20px;

padding-top:10px;}

b {

height:50px;

border:2px dotted red;

margin-top:20px;

padding-top:10px;}

然后在页面的主体中添加如下代码：

<div><u>This</u> is the <i>first</i> <b>block</b> element.</div>

<div><u>This</u> is the <i>second</i> <b>block</b> element.</div>

<p><u>This</u> is <i>paragraph</i> <b>one</b>.</p>

上述代码在浏览器中的显示效果如图-9所示。

图-9

由图－9可以看出，每个块级元素（段落和 <div> 元素）按照在代码中书写的顺序逐一出现在一个不同的行中，而 <b>、<i> 和 <u> 这些内联元素则位于块级元素中的同一行，且按照从左到右的顺序出现。对于块级元素，可以设置边框、高度、宽度、外边距和内边距；而对于内联元素，即使设置高度和外边距，也没有实际效果，只能设置内边距（见 <b> 元素的显示效果）。

如果希望让元素的位置与在普通流位置中出现的位置不同，则需要使用定位属性来实现。使用position 属性可以更改定位模式为相对定位、绝对定位和固定定位，还可以使用偏移属性来实现元素框位置的偏移；或者使用float属性来实现浮动定位。

3.2. 浮动定位

3.2.1. 浮动概述

浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

使用浮动可以修改元素原有的定位方式，尤其在一些需要设置多个块级元素同行排列的情况下会非常有用。

3.2.2. 浮动定位

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。为了更好的理解浮动的作用，我们先用一些示意图解释浮动的效果，然后在使用float 属性来实现这些效果。

首先，请看图－10。包含框中有三个元素框，如果把框 1 向右浮动，则它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

图-10

然后，我们查看图－11。

图-11

由图－11可以看出，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失（如图－11中的左图所示）。

而如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框（如图－11中的右图所示）。

而如果包含框太窄或者浮动框的高度不同，会出现什么现象呢？我们查看图－12。

图-12

由图－12可以看出，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块会自动向下移动，直到有足够的空间（如图－12中的左图所示）；而如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”（如图－12中的右图所示）。

3.2.3. float 属性

如果需要指示框浮动在包含框的左边或者右边，我们可以通过 float 属性来实现。

float 属性定义元素在哪个方向浮动。float 属性可能的取值如下：

Left向左 Right向右

比如，我们定义如下样式规则：

div {

height:100px;

background-color:#f0f0f0;

border:1px solid gray;

margin:10px 0px 0px 10px;

font-size:24px;}

div.float {float:right;}

然后，在页面的主体中添加如下代码：

上述代码在浏览器中的显示效果如图-13所示。

图-13

由图－13可以看出，设置框 2 向右浮动后，它会停靠在页面的右边框，而框 3 位于框 2浮动前的位置，就像框 2 不存在一样。但是因为没有指定元素框的宽度，则浮动框会尽可能的窄，就如同框 2 的效果。

因此，指定元素的 float 属性后，最好设置元素的 width 属性，用于指示浮动框占用包含框的宽度。我们修改 <div> 元素的样式规则，为其加上宽度：

div {

width:100px;

height:100px;

background-color:#f0f0f0;

border:1px solid gray;

margin:10px 0px 0px 10px;

font-size:24px;}

div.float {float:right;}

图-14给出了上述代码在浏览器中的显示效果。

图-14

3.2.4. clear 属性

标准清理浮动的方法(一般类名写作clear clearfix)：

.Clear:after{

Display:block;

Height:0;

Content:”.”;

Visibility:hidden;

Clear:both;

}

.Clear{

Zoom:1;

}

伪类：after表示给应用该类选择器的元素添加一个在最后位置的子元素来清除浮动。

出现在其他元素中的图形和文本元素称为浮动元素，而 clear 属性用于设置一个元素的侧面是否允许其他的浮动元素。

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样。

clear 属性可能的取值如表－9 所示。

表－9 clear属性的取值

其中，none 值为默认值，不进行清理，即会出现文本围绕的效果；而如果声明为左边或右边清除，表示框的哪些边不应该挨着浮动框，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

比如，我们定义如下样式规则（为两个浮动元素框定义不同的高度）：

p {

height:200px;

border:1px solid gray;

margin:20px 0px 0px 20px;

font-size:24px;}

div {

width:100px;

border:1px solid gray;

margin:20px 0px 0px 20px;

font-size:24px;

background-color:#f0f0f0;}

div.floatLeft {

float:left;

height:150px;}

div.floatRight {

float:right;

height:100px;}

然后，在页面主体中添加如下代码：

<div>左侧浮动框</div>

<div>右侧浮动框</div>

<p>This is paragraph.This is paragraph.This is paragraph.This is paragraph.</p>

此时，虽然先定义 <div> 元素再添加段落 <p> 元素，但是因为两个 <div> 元素分别设置了向左和向右浮动，则段落 <p> 元素会向上移，且出现文本包围浮动框的效果，如图－15所示。

图-15

如果不希望实现图－15所示的文本围绕效果，则可以设置段落元素的 clear 属性。如果需要清除右侧浮动框，则可以设置clear属性为值right ，即段落元素的右边不允许有浮动元素。修改样式规则如下：

p {

height:200px;

border:1px solid gray;

margin:20px 0px 0px 20px;

font-size:24px;

clear:right;}

图－16给出了修改样式规则后的代码在浏览器中的显示效果。

图-16

由图－16可以看出，设置了段落的clear 属性为right 值以后，为段落元素添加上外边距以实现清除右边浮动框的效果。但是因为左边浮动框的高度大于右边浮动框，左边依然有文本围绕浮动框的效果。

因此，如果需要完全清除文本围绕的效果，则可以设置清除左侧浮动框（左侧浮动框的高度大于右侧浮动框，可以添加足够的上外边距）；或者设置clear 属性为both 值。为此，我们修改样式规则如下：

p {

height:200px;

border:1px solid gray;

margin:20px 0px 0px 20px;

font-size:24px;

clear:both;}

图－17给出了修改样式规则后的代码在浏览器中的显示效果。

图-17

4. 显示

4.1. 显示方式

4.1.1. 显示方式

相信学到这里的时候，你已经对“一切皆为框”这句话有了深刻的理解：页面上所有的元素都可以显示为框。不过，像 <div>、<h1> 或 <p> 元素常常被称为块级元素，这意味着这些元素显示为一块内容，即“块框”；与之相反，<span> 和 <strong> 等元素称为“内联元素”或者“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

透明度设置：

Opacity:值(0-1)，Opera，Chrome浏览器

Filter:alpha(opacity=值[0-100])，IE表述方式

4.1.2. display 属性

除了默认的显示效果之外，我们还可以使用 display 属性来修改元素框的显示方式，即改变生成的框的类型。该属性可能的取值如表 - 10 所示。

表－10 display属性的取值

由表-10可以看出，我们可以用 display 属性定义建立布局时元素生成的显示框类型。

1、block值

如果将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。比如，我们定义如下样式规则：

a {

width:100px;

height:30px;

border:1px solid gray;

background-color:#f0f0f0;

text-align:center;}

a.displayAsBlock {display:block;}

然后，在页面的主体中添加如下代码：

上述代码在浏览器中的显示效果如图-18所示。

图-18

由图-18可知，设置了 <a> 元素的显示类型为 block 之后，该元素就显示为块级元素的效果，可以定义高度和宽度，且会自动换行。

2、inline值

如果将 display 属性设置为 inline，可以让块级元素（比如 <p> 元素）表现得像内联元素一样。比如，我们定义如下样式规则：

p {

width:100px;

height:50px;

border:1px solid gray;

background-color:#f0f0f0;

text-align:center;}

p.displayAsInline {display:inline;}

然后，在页面的主体中添加如下代码：

上述代码在浏览器中的显示效果如图-19所示。

图-19

由图-19可知，设置了 <p> 元素的显示类型为 inline 之后，该元素就显示为内联元素的效果，定义的高度和宽度失效，且不会自动换行。

3、inline-block 值

inline-block 值表示行内块元素，是CSS2.1 新增的值。为了更好的理解此属性值的作用，我们添加如下样式规则：

p.displayAsInlineBlock {display:inline-block;}

然后，在页面的主体中添加如下代码：

上述代码在浏览器中的显示效果如图-20所示。

图-20

由图-20可知，设置了 <p> 元素的显示类型为 inline-block 之后，多个段落元素依然显示在同一行，但是在同一行内的段落元素表现的如同块级元素，即可以为其定义高度和宽度，会占据相应的空间（如段落3 和段落 4）。

4、none 值

可以通过把 display 属性设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

比如，我们继续定义如下样式规则：

p.noDisplay {display:none;}

然后，在页面的主体中添加如下代码：

上述代码在浏览器中的显示效果如图-21所示。

图-21

由图-21可知，设置了 <p> 元素的显示类型为 none 之后，该元素就不再显示，且不占用空间，就像没有定义过一样。

由这些示例可以看出，我们可以使用 display 属性来定义元素生成的显示框类型，从而实现页面布局中的某些特殊显示效果。

4.2. 光标

4.2.1. 光标

默认情况下，光标会根据用户的操作发生改变。比如，当鼠标悬停在一个链接上时，光标将从指针形状变为手状形状；当鼠标悬停在文本区域时，会显示 I 形状；而当鼠标悬停在一个按钮上时，光标会显示为箭头。

可以使用 cursor 属性指定显示给用户的鼠标光标类型（形状）。比如，当一个图像可以被点击，甚至可以作为表单上的提交按钮时，则可以使用此属性修改光标的形状为手状，这样可以为用户提供一种可视化的暗示，提示他们可以单击该图像。

4.2.2. cursor 属性

cursor 属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，该属性常用的取值有：auto、default 、pointer 、crosshair 、move 、text 、wait、help 和 URL等。

其中，auto 值表示由浏览器自动根据元素类型设置光标形状，而default 、pointer 、crosshair 、move 、text 、wait 和 help 都容易理解，不再赘述。

url 值是指可以为元素定义一个自定义的图标作为光标形状，只是使用url时，最好在列表的末端始终定义一种普通的光标，这样，当没有由 URL 定义的可用光标时还可以替代显示普通光标。比如，我们可以这样定义：

1 div.definedCursor {cursor:url(image/s1.cur) default;}

5. 列表样式

5.1. 列表样式

5.1.1. 列表项标志 list-style-type

在设置列表的外观中，最简单、最常用同时也是被各浏览器支持的最好的属性就是设置列表项的标志类型。

list-style-type 属性用于控制列表中列表项标志的样式。该属性的取值需要依据列表的类型。例如，在一个无序列表中，列表项的标志是出现在各列表项旁边的圆点，而在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

list-style-type 属性用于无序列表时可以采用的值如表－11 所示。

表－11 list-style-type属性用于无序列表时的取值

list-style-type 属性用于有序列表时，经常采用的且得到了各浏览器广泛支持的值如表－12所示。

表－12 list-style-type属性用于有序列表时常用的取值

list-style-type 属性可以用于列表元素<ul>和<ol>，以影响整个列表中所有的列表项；也可以用于列表项元素 <li> 以实现列表项的单独设置。<li> 元素中的设置将覆盖 <ul> 或者 <ol> 元素中的设置。

5.1.2. 列表项图像 list-style-image

虽然使用list-style-type属性可以控制列表项的标志，但是该属性只能设置常规的标志，如圆形或者数字等。如果需要为页面添加更吸引人的效果，我们可能会希望为列表项添加图像作为标志。这时，我们需要使用list-style-image 属性。

list-style-image 属性使用图像来替换列表项的标记，通过为list-style-image 属性赋值一个图像的URL来显示图像标志。但是，在设置图像标志时，建议始终规定一个 list-style-type 属性以定义常规标志。这样做的好处在于，如果图像不存在或者因为某种原因导致图像不可用时，可以替换显示常规标志。

6. 定位

6.1. 定位机制

6.1.1. 什么是定位

在CSS出现之前，通常使用表格精确的控制页面中内容的位置，而且内容以普通的流方式呈现，即内容按照它们在文档中出现的顺序显示。但是，通过使用CSS的定位属性，即使不用表格，也可以实现页面的精确布局，还可以让信息显示的顺序与它们在文档中出现的顺序不同。

虽然目前依然可以看到很多使用表格定位元素的页面，但是使用CSS来进行定位的趋势将越来越强烈，因为它可以使页面的内容有更好的可重用性，实现页面和布局的真正分离。这是因为一旦页面的布局过多的依赖表格，则通常页面将仅限于显示在最初为其设计的媒体上。随着更多具有不同功能的设备访问 Internet，则可能更多的使用CSS来实现定位。

CSS 有三种基本的定位机制：普通流定位、浮动和绝对定位。

6.1.2. 定位属性

任何元素都可以定位，只是绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型；相对定位元素会相对于它在正常流中的默认位置偏移。

CSS 所提供的用于定位的属性如表－13 所示。

表－13 CSS定位属性

其中，使用position 属性和偏移属性可以实现普通流定位（包括相对定位）和绝对定位（包括固定定位）；使用float 属性可以实现浮动定位。其他属性为辅助属性。

可以使用position 属性指定元素的定位方式，该属性可能的取值如表－14 所示。

表－14 position属性的取值

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性取值为static 时，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。static 值为默认值，代表普通流定位模式，因此很少需要显式地指定该值。

如果指定position 属性的值为static，则不能使用偏移属性来修改元素框的位置，也不能使用z-index 属性设置元素框的堆叠顺序。即使设置了这些属性，浏览器也会自动忽略它们（指top, bottom, left, right 和 z-index）。

另外，static 值和相对定位（relative值）都是普通流定位。相对定位之所以被看作普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置。

如果指定元素框的定位机制为默认方式以外的其他方式，则经常需要使用元素框偏移属性来指示框的位置。在讲解具体的定位方式之前，我们显查看这些用于偏移的属性。

CSS 中提供的元素框偏移属性如表－15所示。

表－15 CSS偏移属性

需要注意的是，如果position 属性的值为 static，那么设置这些偏移属性不会产生任何效果。

6.1.3. 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，元素仍保持其未定位前的形状，它原本所占的空间仍保留，只是元素框会相对于它原来的位置偏移某个距离。通过设置垂直或水平位置，让这个元素相对于它的起点进行移动。

相对定位将元素相对于它在普通流中的位置进行定位，具体的位置由偏移属性来设置。因此，如果需要设置元素为相对定位，则首先需要设置 position 属性的值为 relative，然后使用left 属性或者right 属性设置水平方向的偏移量；也可以使用top 属性或者bottom 属性设置垂直方向的偏移量。

6.1.4. 绝对定位

绝对定位是指将元素的内容从普通流中完全移除，并且可以使用偏移属性来固定该元素的位置。

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。而普通流中其它元素的布局和绝对定位的元素无关。

6.1.5. 堆叠顺序

在前面的示例中我们提到过，一旦修改了元素的定位方式，则元素可能会发生堆叠。当发生堆叠时，默认的处理方式是第一个元素位于后面的元素下方，我们称为堆叠上下文。对于相对定位、绝对定位和固定定位的元素框，可以使用z-index 属性来修改堆叠上下文来控制元素框出现的重叠顺序。

如果设置z-index 属性的值为数值，数值越大表示堆叠顺序更高。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即元素的显示会接近页面表面。

需要注意的是，Z-index 属性仅能在定位元素上奏效，且可以设置为负值。

z-index 属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

比如，我们定义如下样式规则：

div {

z-index:100;

height:100px;

border:1px solid gray;

background-color:#f0f0f0;}

p {

height:80px;

width:300px;

border:2px dashed black;

background-color:white;}

p.first {

position:relative;

top:10px;

left:30px;

z-index:1;}

p.second {

position:absolute;

top:60px;

left:120px;

z-index:2;}

#advertise {

position:fixed;

z-index:3;

top:120px;

l eft:150px;

width:100px;

height:80px;

border:1px solid gray;

background-color:#f0f0f0;

padding:30px;

font-size:24px;}

然后，在页面的主体中添加如下代码：

<div>没有设置定位的<div></div>

上述代码在浏览器中的显示效果如图-21所示。

图-21

由图－21可见，虽然设置了第一个 <div> 元素的z-index 属性的值为100，为当前页面上的最大堆叠值，但是因为此 <div> 元素没有设置定位属性，即为普通流模式定位，则堆叠顺序无效，依然显示在最底端；其余设置了定位属性的元素按照其设置的堆叠顺序逐一显示。因为这些元素框都是重叠的，则z-index 属性的值越大，相应的元素框越接近于顶部（如广告框的 <div> 元素位于最顶端）。

6.1.6. 固定定位

固定定位是指将元素的内容固定在页面的某个位置。设置元素为固定定位后，元素不仅从普通流中完全移除，而且当用户向下滚动页面时元素框并不随着移动。

固定定位元素的位置与文档流无关，因此也不占据空间。如果需要设置元素为固定定位，则首先需要设置position 属性的值为 fixed，可定位于相对于浏览器窗口的指定坐标。元素的位置可通过 left、top、right 以及bottom 这些偏移属性来规定。偏移属性的取值依然和前面小节中讲解的相同。

一旦被设置为固定定位，不论窗口滚动与否，元素都会留在那个位置。

为了演示固定定位方式，我们模拟一个常见的页面广告的效果。许多网页经常会有一个广告框浮动在页面上，而无论怎么滚动页面，该框的位置固定在页面的某个位置。我们可以用固定定位来模拟此效果。

比如，我们定义如下样式规则：

#advertise {

position:fixed;

top:30px;

left:80px;

width:30%;

height:80px;