WEB基础03文本格式化表格样式shg

《WEB基础03文本格式化表格样式shg》由会员分享，可在线阅读，更多相关《WEB基础03文本格式化表格样式shg（52页珍藏版）》请在装配图网上搜索。

1、1. 文文本格式式化本章主要要讲解如如何实现现文本的的格式化化，包括括控制文文本的字字体（如如字体大大小、字字体样式式和字体体系列等等）和设设置文本本的格式式（如文文本颜色色、文本本排列和和文本缩缩进等）。1.1. 文本本格式化化1.1.1. 控制字字体CSS 字体属属性定义义文本的的字体系系列、大大小、加加粗、风风格（如如斜体）等等，这些些属性会会直接影影响字体体及其外外观。常常用的属属性有：1、指定定字体（ffontt-faamilly）可以使用用fonnt-ffamiily属属性指定定文本的的字体，语语法如下下：1. fontt-fammilyy:namme/inhheriit;如果需要

2、要指定字字体，则则设置值值为naame，即即首选字字体的名名称。如如果字体体名称有有多个单单词，即即中间有有空格，则则需要将将字体名名称用一一对单引引号或者者双引号号包围起起来。如如果字体体名称包包含非AASCIII字符符，就必必须声明明样式表表的编码码。这个属性性最大的的问题在在于，如如果用户户机器上上并没有有安装所所需要的的字体，则则会显示示默认字字体。因因此，在在指定字字体时，最最好同时时指定替替代字体体。我们可以以为foont-fammilyy属性指指定多种种字体，且且多种字字体之间间用逗号号隔开，这这样可以以为页面面指定一一个字体体列表。如如果用户户机器没没有第一一种字体体，则浏浏览

3、器会会查找字字体列表表中的下下一种字字体作为为替代字字体显示示。如果果找遍了了字体列列表还是是没有可可以使用用的字体体，浏览览器会使使用默认认字体显显示页面面。我们可以以结合特特定字体体和通用用字体系系列来指指定字体体，如：1. h1 fonnt-fammilyy: Geeorggia, seeriff;如果用户户机器上上没有安安装 GGeorrgiaa，但安安装了 Timmes 字体（sseriif 字字体系列列中的一一种字体体），浏浏览器就就可能对对 元素使使用 TTimees。尽尽管 TTimees 与与 Geeorggia 并不完完全匹配配，但至至少足够够接近。2、字体体大小（ffon

4、tt-siize ）fontt-siize 属性用用来设置置文本的的大小。如如果没有有规定字字体大小小，普通通文本（比比如段落落）的默默认大小小是 116 像像素 (16ppx=11em)。可以使用用多种方方式指定定这个属属性的值值：绝对对大小、相相对大小小、长度度单位和和百分比比。其中中，如果果使用长长度单位位来设置置字体大大小，还还可以分分别使用用相对单单位和绝绝对单位位。长度是指指采用一一种长度度单位来来表达字字体的大大小。可可使用的的绝对单单位如表表1所所示。表1 长度的的绝对单单位图1给给出了使使用长度度的绝对对单位来来设置字字体大小小的效果果。图-1也可以使使用相对对单位的的长度来

5、来设置字字体大小小，可使使用的相相对单位位如表2所示示。表2 长度的的相对单单位如果需要要使用相相对单位位来设置置大小，我我们可以以使用ppx，表表示像素素。通过过像素设设置文本本大小，可可以对文文本大小小进行完完全控制制。比如如，我们们可以这这样设置置：1. h1 fonnt-sizze:60ppx;2. h2 fonnt-sizze:40ppx;3. p fonnt-sizze:14ppx;fontt-siize 属性的的值还可可以设置置为“inhheriit”，规定定应该从从父元素素继承字字体尺寸寸。3、字体体加粗（ffontt-weeighht）fontt-weeighht属性性用于设

6、设置文本本的粗细细，常用用于实现现将显示示元素的的文本中中所用的的字体加加粗。该属性可可能的值值如表3所示示。表3 fonnt-wweigght属属性的取取值使用 bboldd 关键键字可以以将文本本设置为为粗体。关键字 1000 9000 为字字体指定定了 99 级加加粗度。如如果一个个字体内内置了这这些加粗粗级别，那那么这些些数字就就直接映映射到预预定义的的级别，1100 对应最最细的字字体变形形，9000 对对应最粗粗的字体体变形。数数字 4400 等价于于 noormaal，而而 7000 等等价于 bolld。如果将元元素的加加粗设置置为 bboldder，浏浏览器会会设置比比所继承

7、承值更粗粗的一个个字体加加粗。与与此相反反，关键键词 llighhterr 会导导致浏览览器将加加粗度下下移而不不是上移移。比如，我我们可以以这样定定义样式式规则：1. p.noormaal fonnt-weiightt:norrmall;2. p.thhickk fonnt-weiightt:bolld;3. p.thhickker fonnt-weiightt:9000;然后查看看如下代代码：1. fonnt-weiightt:norrmall2. fonnt-weiightt:bolld3. fonnt-weiightt:9000上述代码码在浏览览器中的的显示效效果如图图-2所所示。图-

8、2其中，bboldd是最常常用的值值，也会会遇到使使用noormaal的情情况，尤尤其是在在大量加加粗文本本中创建建不同效效果的文文本时。1.1.2. 控制文文本格式式CSS除除了可以以设置字字体，还还可以定定义文本本的外观观。通过过文本属属性，可可以改变变文本的的颜色、字字符间距距、对齐齐文本、装装饰文本本、对文文本进行行缩进等等。1、文本本颜色（ccoloor）coloor 属属性用于于设置文文本的颜颜色，即即元素的的前景色色。这个个颜色还还会应用用到元素素的所有有边框，除除非被 borrderr-coolorr 或另另外某个个边框颜颜色属性性覆盖。没有设置置collor属属性的文文本将使

9、使用浏览览器的默默认颜色色显示。如如果需要要使用该该属性设设置文本本颜色，该该属性的的值可以以是颜色色名称、rrgb 值或者者十六进进制数，其其默认值值取决于于浏览器器。比如，我我们可以以这样设设置：1. p collor: rggb(2255,2555,0);或者1. p collor: #FFFFFF00;2、文本本排列（ttextt-allignn）textt-allignn 是一一个基本本的属性性，用于于设置一一个元素素中的文文本行互互相之间间的对齐齐方式。该属性通通过指定定行框与与哪个点点对齐，从从而设置置块级元元素内文文本的水水平对齐齐方式。该该属性可可能的取取值如表表4所所示。表

10、4 texxt-aaliggn属性性的取值值前 3 个值相相当直接接，不用用额外解解释。textt-allignn属性还还可能取取值 jjusttifyy，我们们称为两两端对齐齐。在两两端对齐齐文本中中，文本本行的左左右两端端都放在在父元素素的内边边界上。然然后，调调整单词词和字母母间的间间隔，使使各行的的长度恰恰好相等等。这种种两端对对齐的排排列方式式经常用用于打印印。比如，我我们可以以这样定定义样式式规则：1. td.llefttAliign texxt-aliign:lefft;2. td.rrighhtAllignn texxt-aliign:rigght;3. td.ccentter

11、AAliggn texxt-aliign:cennterr;4. td.jjusttifyyAliign texxt-aliign:jusstiffy;然后，查查看如下下代码：1. 2. 3. Witth ssunsshinne, waaterr, annd ccareefull teendiing, roosess wiill blooom sevveraal ttimees iin aa seeasoon.4. 5. 6. Witth ssunsshinne, waaterr, annd ccareefull teendiing, roosess wiill blooom sevveraa

12、l ttimees iin aa seeasoon.7. 8. 9. Witth ssunsshinne, waaterr, annd ccareefull teendiing, roosess wiill blooom sevveraal ttimees iin aa seeasoon.10. 11. 12. Witth ssunsshinne, waaterr, annd ccareefull teendiing, roosess wiill blooom sevveraal ttimees iin aa seeasoon.13. 14. 上述代码码在浏览览器中的的显示效效果如图图-3所所

13、示。图-3由图33可以看看出，居居左或者者居右排排列后，另另外一端端会显示示为锯齿齿状（使使用默认认的字宽宽和间隔隔，以单单词为单单位换行行）；而而如果使使用juustiify则则会显示示为两端端对齐的的效果。3、文字字修饰（ttextt-deecorratiion）textt-deecorratiion 属性用用于对文文本进行行修饰。它它允许对对文本设设置某种种效果，如如加下划划线、上上划线或或者闪烁烁等。textt-deecorratiion属属性可能能的取值值如表5所示示。表5 texxt-ddecoorattionn属性的的取值undeerliine 会对元元素加下下划线;而ovver

14、llinee 的作作用恰好好相反，会会在文本本的顶端端画一个个上划线线；值 linne-tthrooughh 则在在文本中中间画一一个贯穿穿线;bblinnk 会会让文本本闪烁。还可以在在一个规规则中结结合多种种装饰，只只需要为为texxt-ddecoorattionn属性设设置多个个值，且且多个值值之间用用空格隔隔开。比如，如如果一个个段落中中的文本本既有下下划线，又又有上划划线，我我们可以以这样定定义：1. p texxt-deccoraatioon:undderllinee ovverllinee;nonee 值会会关闭原原本应用用到一个个元素上上的所有有装饰。通通常，无无装饰的的文本是

15、是默认外外观，但但某些元元素例外外。比如如，链接接默认地地会有下下划线。因因此，如如果希望望去掉超超链接的的下划线线，可以以使用以以下 CCSS 来做到到这一点点：1. a texxt-deccoraatioon: noone;如果显式式地用这这样一个个规则去去掉链接接的下划划线，那那么它与与正常文文本之间间在视觉觉上的唯唯一差别别可能就就是颜色色（浏览览器往往往会为链链接设置置默认的的颜色）。blinnk 值值会创建建闪烁的的文本，但但是这通通常被认认为是不不赞成使使用的方方式，大大部分浏浏览器也也不支持持它。4、行高高（liine-heiightt）linee-heeighht 属属性用于

16、于设置行行间的距距离。当处理大大量文本本时，增增加文本本行之间间的垂直直空间量量可以提提高文档档可阅读读性，这这种空间间量称为为行间距距。在WWeb页页面中增增加行间间距是非非常有用用的。比比如，如如果文本本行之间间存在更更多的空空间，当当达到一一行的末末尾之后后，更容容易发现现下一行行的起点点。linee-heeighht 属属性会影影响行框框的布局局。在应应用到一一个块级级元素时时，它定定义了该该元素中中基线之之间的最最小距离离。行间距是是linne-hheigght 与 ffontt-siize 的计算算值之差差。行间间距会被被分为两两半，分分别加到到一个文文本行内内容的顶顶部和底底部。

17、而而可以包包含这些些内容的的最小框框就是行行框。比比如，我我们可以以这样定定义样式式规则：1. p borrderr:1pxx soolidd reed;2. p.smmalllLenngthh linne-heiightt: 100px;3. p.biigLeengtth linne-heiightt: 300px;然后，查查看如下下代码：1. 这这是拥有有标准行行高的段段落。在在大多数数浏览器器中默认认行高大大约是 20ppx。这这是拥有有标准行行高的段段落。2. lenngthh=10ppx。这这个段落落拥有更更小的行行高。这这个段落落拥有更更小的行行高。3. lenngthh=30pp

18、x。这这个段落落拥有更更大的行行高。这这个段落落拥有更更大的行行高。上述代码码在浏览览器中的的显示效效果如图图-4所所示。图-45、首行行文本缩缩进（ttextt-inndennt）把 Weeb 页页面上的的段落的的第一行行缩进，这这是一种种最常用用的文本本格式化化效果。CCSS 提供了了 teext-inddentt 属性性，该属属性可以以方便地地实现文文本缩进进。textt-inndennt 属属性缩进进元素中中的首行行文本，即即使用该该属性可可以让元元素的第第一行缩缩进一个个给定的的距离。这这个属性性最常见见的用途途是将段段落的首首行缩进进，下面面的规则则会使段段落的首首行缩进进 2 e

19、m：1. p.fiirstt texxt-inddentt: 2eem;可以为块块级元素素应用 texxt-iindeent属属性，但但无法将将该属性性应用于于行内元元素，且且图像之之类的替替换元素素上也无无法应用用 teext-inddentt 属性性。不过过，如果果一个块块级元素素（比如如段落）的的首行中中有一个个图像，它它会随该该行的其其余文本本移动。textt-inndennt 属属性除了了可以使使用长度度单位，还还包括百百分比值值。百分分数是相相对于缩缩进元素素的父元元素的宽宽度。即即如果将将缩进值值设置为为 200%，所所影响元元素的第第一行会会缩进其其父元素素宽度的的 200%。

20、比如，我我们可以以这样定定义样式式规则（为为了更好好的观察察父元素素的边界界，我们们定义了了 元素素的边框框）：1. div 2. widtth: 4000pxx;3. bordder:1pxx soolidd reed;4. p.inndennt texxt-inddentt: 20%;然后，查查看如下下代码：1. 2. Thiis iis aa paaraggrapph.Thiis iis aa paaraggrapph.Thiis iis aa paaraggrapph.3. 4. Thiss iss a parragrraphh.Thiis iis aa paaraggrapph.Th

21、iis iis aa paaraggrapph.5. 6. 上述代码码在浏览览器中的的显示效效果如图图-5所所示（缩缩进值是是父元素素的 220%，即即 800 个像像素）：图-52. 表表格样式式2.1. 表格格常用样样式属性性2.1.1. 表格常常用样式式属性对于表格格而言，它它可以使使用前面面章节中中讲述的的很多CCSS样样式（如如背景色色、边框框和字体体等），比比如，可可以使用用 wiidthh 属性性、heeighht 属属性设置置单元格格的大小小；可以以使用bbordder 属性设设置单元元格的边边框；可可以使用用padddinng 属属性控制制表格中中内容与与边框的的距离；可以使

22、使用baackggrouund 属性设设置表格格或者单单元格的的背景色色以及背背景图像像；还可可以使用用文本格格式化相相关的样样式属性性来定义义表格中中的文本本。需要注意意的是，除除了baackggrouund-collor 属性和和heiightt 属性性之外，最最好避免免将这些些属性用用于 元素素。因为为这些属属性用于于表行时时，浏览览器对它它们的支支持并没没有像它它们用于于单个单单元格时时那么好好。2.1.2. 垂直方方向对齐齐vertticaal-aaliggn 属属性用于于设置元元素的垂垂直对齐齐方式，当当操作内内联元素素时（比比如图像像或者普普通文本本），该该属性非非常有用用。在表

23、表单元格格中，这这个属性性会设置置单元格格框中的的单元格格内容的的对齐方方式。vertticaal-aaliggn 属属性可能能的取值值有很多多，但是是该属性性在用于于表格单单元格中中的内容容垂直对对齐方式式时可取取的值如如表66所示。表6 verrticcal-aliign属属性的取取值vertticaal-aaliggn 属属性在用用于表格格单元格格中的内内容垂直直对齐方方式时，可可以设置置为顶部部topp、中部部midddlee和底部部botttomm三个值值。比如，我我们定义义如下样样式规则则：1. .topp verrticcal-aliign:topp;2. .midddlee v

24、errticcal-aliign:midddlee;3. .botttomm verrticcal-aliign:botttomm;4. td widdth:2000px;heiightt:80ppx;borrderr:1pxx soolidd reed;然后，在在页面的的主体中中添加如如下代码码：1. 2. 3. somme ttextt4. somme ttextt5. 6. 7. somme ttextt8. somme ttextt9. 10. 上述代码码在浏览览器中的的显示效效果如图图-6所所示。图-6表格单元元格中内内容的垂垂直对齐齐方式的的默认值值为miiddlle，因因此，图图

25、1中中表格的的第一列列的两个个单元格格中的文文本都是是垂直居居中显示示；而设设置了ttop 值和bbotttom 值以后后，可以以设置单单元格中中内容位位于单元元格顶部部或者底底部显示示。另外，默默认情况况下，单单元格中中的文本本在水平平方向上上居左显显示，可可以使用用texxt-aaliggn 属属性来修修改其水水平对齐齐方式。2.2. 表格格特有样样式属性性除了上一一节中讲讲述的那那些属性性以外，还还有一些些属性是是只与表表格相关关的。这这些仅与与表格相相关的样样式属性性可以极极大的改改善表格格的外观观。2.2.1. 边框合合并从在前面面的示例例中不难难发现，如如果设置置了单元元格的边边框

26、，相相邻单元元格的边边框会单单独显示示，类似似于双线线边框（见见图-66）。如如果需要要合并相相邻的边边框，则则可以使使用boordeer-ccolllapsse 属属性。bordder-colllappse 属性设设置是否否将表格格边框折折叠为单单一边框框，即是是否被合合并为一一个单一一的边框框，还是是像在标标准的 HTMML 中中那样分分开显示示。bordder-colllappse 属性可可能的取取值如表表7所所示。表7 borrderr-coollaapsee 属性性的取值值bordder-colllappse 属性的的值如果果设置为为sepparaate 值或者者不设置置，浏览览器会

27、独独立显示示每一个个单元格格的边框框，即使使两个相相邻单元元格具有有不同类类型的边边框。bordder-colllappse 属性的的值如果果设置为为colllappse 值，则则会对边边框进行行合并，即即会基于于一组内内置的复复杂规则则来决定定显示哪哪一个边边框。一一般情况况下，浏浏览器会会对边框框进行折折叠。比如，我我们定义义如下样样式规则则：1. tablle borrderr:2pxx dootteed bblacck;2. td widdth:2000px;heiightt:50ppx;3. tablle.sepparaate borrderr-colllappse:sepparaa

28、te;4. tablle.colllappse borrderr-colllappse:colllappse;5. td.ssoliid borrderr:3pxx soolidd siilveer;6. td.ddashhed borrderr:3pxx daasheed ggrayy;然后，在在页面的的主体中中添加如如下代码码：1. bordder-colllappse:sepparaate2. 3. 4. 第1行第1列5. 第1行第2列6. 7. 8. 第2行第1列9. 第2行第2列10. 11. 12. 13. bordder-colllappse:colllappse14. 15.

29、16. 第1行第1列17. 第1行第2列18. 19. 20. 第2行第1列21. 第2行第2列22. 23. 上述代码码在浏览览器中的的显示效效果如图图-7所所示。图-7为了更好好的查看看效果，图图-7中中的相邻邻单元格格使用了了不同样样式的边边框。图图-7中中的第一一个表格格的boordeer-ccolllapsse 属属性使用用了seeparratee 值，则则表格的的边框、各各单元格格的边框框都独立立显示，即即使相邻邻的单元元格的边边框样式式不同。第二个表表格的bbordder-colllappse 属性使使用了ccolllapsse 值值，相邻邻的边框框则会发发生合并并，边框框会互相

30、相折叠。由由图可见见，实线线边框的的优先级级高于虚虚线边框框。2.2.2. 边框边边距由前面的的示例不不难发现现，在表表格中的的单元格格之间存存在一定定的间距距，如果果希望控控制这个个间距，则则可以使使用boordeer-sspaccingg 属性性。bordder-spaacinng 属属性设置置相邻单单元格的的边框间间的距离离，但是是仅限于于分隔单单元格边边框，即即borrderr-coollaapsee 属性性为seeparratee 值的的情况下下，也称称为边框框分离模模式。该属性的的值可以以是长度度单位或或者单词词 innherrit。如如果设置置为长度度，则可可以使用用px、ccm

31、等单单位，但但是不允允许使用用负值；如果设设置为iinheeritt值，表表示规定定应该从从父元素素继承 borrderr-sppaciing 属性的的值。设置boordeer-sspaccingg 属性性的值为为长度值值时，可可以为该该属性指指定一个个或者两两个值。如果指定定一个值值，则该该值同时时应用于于水平和和垂直间间距；如如果指定定两个值值，那么么第一个个值指定定水平间间距，第第二个值值指定垂垂直间距距，且两两个值之之间用空空格隔开开。比如，我我们定义义如下样样式规则则：1. tablle borrderr:2pxx dootteed ggrayy;2. td 3. backkgroo

32、undd-collor:#f00f0ff0;4. widtth:2000px;5. heigght:50ppx;6. bordder-colllappse:sepparaate;7. bordder:1pxx soolidd bllackk;8. tablle.sinngleeSpaacinng borrderr-spaacinng:5pxx;9. tablle.douubleeSpaacinng borrderr-spaacinng:10ppx 220pxx;然后，在在页面的的主体中中添加如如下代码码：1. 2. 设置一一个值3. 4. 第1行第1列5. 第1行第2列6. 7. 8. 第2行

33、第1列9. 第2行第2列10. 11. 12. 13. 14. 设置两两个值15. 16. 第1行第1列17. 第1行第2列18. 19. 20. 第2行第1列21. 第2行第2列22. 23. 上述代码码在浏览览器中的的显示效效果如图图-8所所示。图-8由图-88可以看看出，第第一个表表的boordeer-sspaccingg 属性性只设置置了一个个值为55px，则则单元格格边框之之间的垂垂直和水水平间隔隔均为55 像素素；而第第二个表表的boordeer-sspaccingg 属性性设置了了两个值值，则单单元格边边框之间间的水平平间距为为10 像素，而而垂直间间距较大大，为220 像像素。

34、需要注意意的是，为为了尽量量能够在在各浏览览器中得得到一致致的显示示效果，最最好为 元元素设置置borrderr-sppaciing 属性，而而不是单单元格等等其他元元素。3. 浮浮动定位位3.1. 定位位概述3.1.1. 定位概概述CSS 为定位位提供了了一些属属性，利利用这些些属性，可可以建立立列式布布局，还还可以将将布局的的一部分分与另一一部分重重叠，这这样可以以完成多多年来通通常需要要使用多多个表格格才能完完成的任任务。定位的基基本思想想很简单单，即可可以定义义元素框框相对于于其正常常位置应应该出现现的位置置，或者者相对于于父元素素、另一一个元素素甚至浏浏览器窗窗口本身身的位置置。显然

35、然，这个个功能非非常强大大，而且且各浏览览器对 CSSS2 中中定位的的支持远远胜于对对其它方方面的支支持。CSS 有三种种基本的的定位机机制：普普通流定定位、浮浮动和绝绝对定位位。其中，使使用poosittionn 属性性和偏移移属性可可以实现现普通流流定位（包包括相对对定位）和和绝对定定位（包包括固定定定位）；使用ffloaat 属属性可以以实现浮浮动定位位。其他他属性为为辅助属属性。在后面的的章节中中，我们们会详细细讲解普普通流定定位、相相对定位位、绝对对定位和和浮动。3.1.2. 普通流流定位默认情况况下，通通过使用用称为普普通流的的方式在在页面中中布局元元素。在普通流流中定位位，页面

36、面中的块块级元素素框从上上到下一一个接一一个地排排列，且且每一个个块级元元素都会会出现在在一个新新行中（比比如 元素、 元元素），元元素框之之间的垂垂直距离离是由框框的垂直直外边距距计算出出来的。内联元素素将在一一行中从从左到右右排列水水平布置置，不需需要从新新行开始始。可以以使用水水平内边边距、边边框和外外边距调调整它们们的间距距。但是是，垂直直内边距距、边框框和外边边距不影影响行内内框的高高度。由由一行形形成的水水平框称称为行框框（Liine Boxx），行行框的高高度总是是足以容容纳它包包含的所所有行内内框。不不过，设设置行高高可以增增加这个个框的高高度。为了更好好的理解解普通流流定位模

37、模式，我我们定义义如下样样式规则则：1. p 2. heiightt:70ppx;3. borrderr:1pxx soolidd grray;4. marrginn-topp:20ppx;5. padddinng-topp:10ppx;6. div 7. heigght:70ppx;8. bordder:2pxx daasheed bblacck;9. marggin-topp:20ppx;10. padddingg-topp:10ppx;11. b 12. heigght:50ppx;13. bordder:2pxx dootteed rred;14. marggin-topp:20ppx

38、;15. padddingg-topp:10ppx;然后在页页面的主主体中添添加如下下代码：1. Thiis iss thhe ffirsst bloock ellemeent.2. Thiis iss thhe ssecoond bloock ellemeent.3. Thiis iss paaraggrapph onee.上述代码码在浏览览器中的的显示效效果如图图-9所所示。图-9由图99可以看看出，每每个块级级元素（段段落和 元素）按按照在代代码中书书写的顺顺序逐一一出现在在一个不不同的行行中，而而 、 和 这些内内联元素素则位于于块级元元素中的的同一行行，且按按照从左左到右的的顺序出出

39、现。对对于块级级元素，可可以设置置边框、高高度、宽宽度、外外边距和和内边距距；而对对于内联联元素，即即使设置置高度和和外边距距，也没没有实际际效果，只只能设置置内边距距（见 元素素的显示示效果）。如果希望望让元素素的位置置与在普普通流位位置中出出现的位位置不同同，则需需要使用用定位属属性来实实现。使使用poosittionn 属性性可以更更改定位位模式为为相对定定位、绝绝对定位位和固定定定位，还还可以使使用偏移移属性来来实现元元素框位位置的偏偏移；或或者使用用flooat属属性来实实现浮动动定位。3.2. 浮动动定位3.2.1. 浮动概概述浮动定位位是指将将元素排排除在普普通流之之外，并并且将

40、它它放置在在包含框框的左边边或者右右边，但但是依旧旧位于包包含框之之内。也也就是说说，浮动动的框可可以向左左或向右右移动，直直到它的的外边缘缘碰到包包含框或或另一个个浮动框框的边框框为止。使用浮动动可以修修改元素素原有的的定位方方式，尤尤其在一一些需要要设置多多个块级级元素同同行排列列的情况况下会非非常有用用。3.2.2. 浮动定定位由于浮动动框不在在文档的的普通流流中，所所以文档档的普通通流中的的块框表表现得就就像浮动动框不存存在一样样。为了了更好的的理解浮浮动的作作用，我我们先用用一些示示意图解解释浮动动的效果果，然后后在使用用flooat 属性来来实现这这些效果果。首先，请请看图10。包

41、包含框中中有三个个元素框框，如果果把框 1 向向右浮动动，则它它脱离文文档流并并且向右右移动，直直到它的的右边缘缘碰到包包含框的的右边缘缘：图-100然后，我我们查看看图111。图-111由图111可以以看出，当当框 11 向左左浮动时时，它脱脱离文档档流并且且向左移移动，直直到它的的左边缘缘碰到包包含框的的左边缘缘。因为为它不再再处于文文档流中中，所以以它不占占据空间间，实际际上覆盖盖住了框框 2，使使框 22 从视视图中消消失（如如图111中的的左图所所示）。而如果把把所有三三个框都都向左移移动，那那么框 1 向向左浮动动直到碰碰到包含含框，另另外两个个框向左左浮动直直到碰到到前一个个浮动

42、框框（如图图111中的右右图所示示）。而如果包包含框太太窄或者者浮动框框的高度度不同，会会出现什什么现象象呢？我我们查看看图112。图-122由图112可以以看出，如如果包含含框太窄窄，无法法容纳水水平排列列的三个个浮动元元素，那那么其它它浮动块块会自动动向下移移动，直直到有足足够的空空间（如如图112中的的左图所所示）；而如果果浮动元元素的高高度不同同，那么么当它们们向下移移动时可可能被其其它浮动动元素“卡住”（如图图122中的右右图所示示）。3.2.3. flooat 属性如果需要要指示框框浮动在在包含框框的左边边或者右右边，我我们可以以通过 flooat 属性来来实现。floaat 属属

43、性定义义元素在在哪个方方向浮动动。flloatt 属性性可能的的取值如如表88 所示示。表8ffloaat属性性的取值值比如，我我们定义义如下样样式规则则：1. divv 2. heiightt:1000px;3. bacckgrrounnd-collor:#f00f0ff0;4. borrderr:1pxx soolidd grray;5. marrginn:10ppx 00px 0pxx 100px;6. fonnt-sizze:24ppx; 7. div.flooat flooat:rigght;然后，在在页面的的主体中中添加如如下代码码：1. 框12. 框23. 框3上述代码码在浏览览

44、器中的的显示效效果如图图-133所示。图-133由图113可以以看出，设设置框 2 向向右浮动动后，它它会停靠靠在页面面的右边边框，而而框 33 位于于框 22浮动前前的位置置，就像像框 22 不存存在一样样。但是是因为没没有指定定元素框框的宽度度，则浮浮动框会会尽可能能的窄，就就如同框框 2 的效果果。因此，指指定元素素的 ffloaat 属属性后，最最好设置置元素的的 wiidthh 属性性，用于于指示浮浮动框占占用包含含框的宽宽度。我我们修改改 元素素的样式式规则，为为其加上上宽度：1. div 2. widdth:1000px;3. heigght:1000px;4. bacckgrr

45、ounnd-collor:#f00f0ff0;5. borrderr:1pxx soolidd grray;6. marrginn:10ppx 00px 0pxx 100px;7. fonnt-sizze:24ppx; 8. div.flooat flooat:rigght;图-144给出了了上述代代码在浏浏览器中中的显示示效果。图-1443.2.4. cleear 属性出现在其其他元素素中的图图形和文文本元素素称为浮浮动元素素，而 cleear 属性用用于设置置一个元元素的侧侧面是否否允许其其他的浮浮动元素素。cleaar 属属性定义义了元素素的哪边边上不允允许出现现浮动元元素。在在 CSS

46、S1 和 CCSS22 中，这这是通过过自动为为清除元元素（即即设置了了 cllearr 属性性的元素素）增加加上外边边距实现现的。在在 CSSS2.1 中中，会在在元素上上外边距距之上增增加清除除空间，而而外边距距本身并并不改变变。不论论哪一种种改变，最最终结果果都一样样。cleaar 属属性可能能的取值值如表9 所所示。表9 cleear属属性的取取值其中，nnonee 值为为默认值值，不进进行清理理，即会会出现文文本围绕绕的效果果；而如如果声明明为左边边或右边边清除，表表示框的的哪些边边不应该该挨着浮浮动框，会会使元素素的上外外边框边边界刚好好在该边边上浮动动元素的的下外边边距边界界之下

47、。比如，我我们定义义如下样样式规则则（为两两个浮动动元素框框定义不不同的高高度）：1. p 2. heiightt:2000px;3. borrderr:1pxx soolidd grray;4. marrginn:20ppx 00px 0pxx 200px;5. fonnt-sizze:24ppx;6. div 7. widdth:1000px;8. borrderr:1pxx soolidd grray;9. marrginn:20ppx 00px 0pxx 200px;10. fonnt-sizze:24ppx;11. bacckgrrounnd-collor:#f00f0ff0;12.

48、 div.flooatLLeftt 13. floaat:lefft;14. heigght:1500px;15. div.flooatRRighht 16. floaat:rigght;17. heigght:1000px;然后，在在页面主主体中添添加如下下代码：1. 左侧浮浮动框2. 右侧浮浮动框3. TThiss iss paaraggrapph.Thiis iis pparaagraaph.Thiis iis pparaagraaph.Thiis iis pparaagraaph.此时，虽虽然先定定义 元元素再添添加段落落 元元素，但但是因为为两个 元素分分别设置置了向左左和向右右浮动

49、，则则段落 元素素会向上上移，且且出现文文本包围围浮动框框的效果果，如图图155所示。图-155如果不希希望实现现图115所示示的文本本围绕效效果，则则可以设设置段落落元素的的 cllearr 属性性。如果果需要清清除右侧侧浮动框框，则可可以设置置cleear属属性为值值rigght ，即段段落元素素的右边边不允许许有浮动动元素。修修改样式式规则如如下：1. p 2. heiightt:2000px;3. borrderr:1pxx soolidd grray;4. marrginn:20ppx 00px 0pxx 200px;5. fonnt-sizze:24ppx;6. cleaar:ri

50、gght;图166给出了了修改样样式规则则后的代代码在浏浏览器中中的显示示效果。图-166由图116可以以看出，设设置了段段落的ccleaar 属属性为rrighht 值值以后，为为段落元元素添加加上外边边距以实实现清除除右边浮浮动框的的效果。但但是因为为左边浮浮动框的的高度大大于右边边浮动框框，左边边依然有有文本围围绕浮动动框的效效果。因此，如如果需要要完全清清除文本本围绕的的效果，则则可以设设置清除除左侧浮浮动框（左左侧浮动动框的高高度大于于右侧浮浮动框，可可以添加加足够的的上外边边距）；或者设设置cllearr 属性性为booth 值。为为此，我我们修改改样式规规则如下下：1. p 2.

51、 heiightt:2000px;3. borrderr:1pxx soolidd grray;4. marrginn:20ppx 00px 0pxx 200px;5. fonnt-sizze:24ppx;6. cleaar:botth;图177给出了了修改样样式规则则后的代代码在浏浏览器中中的显示示效果。图-1774. 显显示4.1. 显示示方式4.1.1. 显示方方式相信学到到这里的的时候，你你已经对对“一切皆皆为框”这句话话有了深深刻的理理解：页页面上所所有的元元素都可可以显示示为框。不不过，像像 、 或 元素常常常被称称为块级级元素，这这意味着着这些元元素显示示为一块块内容，即即“块框

52、”；与之之相反， 和 等等元素称称为“内联元元素”或者“行内元元素”，这是是因为它它们的内内容显示示在行中中，即“行内框框”。4.1.2. dissplaay 属属性除了默认认的显示示效果之之外，我我们还可可以使用用 diispllay 属性来来修改元元素框的的显示方方式，即即改变生生成的框框的类型型。该属属性可能能的取值值如表 - 110 所所示。表100 diispllay属属性的取取值由表-110可以以看出，我我们可以以用 ddispplayy 属性性定义建建立布局局时元素素生成的的显示框框类型。1、bllockk值如果将 dissplaay 属属性设置置为 bblocck，可可以让行行

53、内元素素（比如如 元元素）表表现得像像块级元元素一样样。比如如，我们们定义如如下样式式规则：1. a 2. widdth:1000px;3. heiightt:30ppx;4. borrderr:1pxx soolidd grray;5. bacckgrrounnd-collor:#f00f0ff0;6. texxt-aliign:cennterr;7. a.diispllayAAsBllockk dissplaay:bloock;然后，在在页面的的主体中中添加如如下代码码：1. 链接1链接222. 链接13. 链接2上述代码码在浏览览器中的的显示效效果如图图-188所示。图-188由图-118可知知，设置置了 元素的的显示类类型为 bloock 之后，该该元素就就显示为为块级元元素的效效果，可可以定义义高度和和宽度，且且会自动动换行。2、innlinne值如果将 dissplaay 属属性设置置为 iinliine，可可以让块块级元素素（比如如 元元素）表表现得像像内联元元素一样样。比如如，我们们定义如如下样式式规则：1. p 2. widdth:1000px;3. heiightt:50ppx;4. borrderr:1pxx soolidd grray;5. bacckgrrounnd-collor:#f00f0ff0;6. texxt