第12课 CSS浮动与定位

1、第第1212课课 CSSCSS浮动与定位浮动与定位 上一课介绍了独立的盒子模型，以及在标准流情况上一课介绍了独立的盒子模型，以及在标准流情况下的盒子的相互关系。如果仅仅按照标准流的方式进下的盒子的相互关系。如果仅仅按照标准流的方式进行排版，就只能按照仅有的几种可能性进行排版，限行排版，就只能按照仅有的几种可能性进行排版，限制太大。制太大。 CSS CSS的制定者也想到了排版限制的问题，因此又给的制定者也想到了排版限制的问题，因此又给出了若干不同的手段以实现各种排版需要，从而可以出了若干不同的手段以实现各种排版需要，从而可以灵活地实现各种形式的排版要求。灵活地实现各种形式的排版要求。 本章介绍本

2、章介绍CSSCSS中中floatfloat和和positionposition这两个重要属性这两个重要属性的应用。的应用。 第第1414章章 盒子的浮动与定位盒子的浮动与定位盒子的浮动盒子的浮动14.1盒子的定位盒子的定位14.2z-index空间位置空间位置14.3盒子的盒子的display属性属性14.414.1 14.1 盒子的浮动盒子的浮动 在标准流中，一个块级元素在水平方向会自在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。向和兄弟元素依次排列，不能并排。 使用使用“浮动浮动”方

3、式后，块级元素的表现就会方式后，块级元素的表现就会有所不同。有所不同。 基本语法：基本语法： floatfloat: none/left/right: none/left/right float float属性默认为属性默认为nonenone，也就是标准流通常，也就是标准流通常的情况。如果将的情况。如果将floatfloat属性的值设置为属性的值设置为leftleft或或rightright，元素就会向其父元素的左侧或右侧靠紧，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。缩，根据盒子

4、里面的内容的宽度来确定。盒子盒子浮动的规则浮动的规则盒子浮动的规则盒子浮动的规则u浮动元素的外边缘不会超过父元素的内边缘浮动元素的外边缘不会超过父元素的内边缘u浮动元素会脱离标准流，未设置浮动的元素会顶浮动元素会脱离标准流，未设置浮动的元素会顶替浮动元素的位置替浮动元素的位置u浮动元素不会互相重叠浮动元素不会互相重叠, ,未设置浮动的元素中的文未设置浮动的元素中的文字会环绕设置了浮动元素的周围字会环绕设置了浮动元素的周围u浮动元素不会上下浮动浮动元素不会上下浮动 14.1.1 14.1.1 制作基础页面制作基础页面 浮动的性质比较复杂，这里先制作一浮动的性质比较复杂，这里先制作一个基础的页面，

5、代码如下，文件为个基础的页面，代码如下，文件为“14-14-01.html”01.html”。 后面讲解将基于这个文件进行。后面讲解将基于这个文件进行。14.1.2 14.1.2 设置第设置第1 1个浮动的个浮动的divdiv 在上面的代码中找到：在上面的代码中找到： .son1.son1 / /* * 这里设置这里设置son1son1的浮动方式的浮动方式* */ / 将将.son1.son1盒子设置为向左浮动，盒子设置为向左浮动，代码为：代码为： .son1.son1 / /* * 这里设置这里设置son1son1的浮动方式的浮动方式* */ / float:leftfloat:left;

6、; 图图14.2 设置第设置第1个个div浮动时的效果浮动时的效果实例实例14-02.htm14.1.3 14.1.3 设置第设置第2 2个浮动的个浮动的divdiv图图14.3 设置前两个设置前两个div浮动时的效果浮动时的效果实例实例14-03.htm14.1.4 14.1.4 设置第设置第3 3个浮动的个浮动的divdiv图图14.4 设置第设置第3个个div浮动时的效果浮动时的效果实例实例14-04.htm14.1.5 14.1.5 改变浮动的方向改变浮动的方向 图图14.5 改变浮动方向后的效果改变浮动方向后的效果 实例实例14-05.htm 图图14.6 div被挤到下一行时的效果

7、被挤到下一行时的效果 14.1.6 14.1.6 再次改变浮动的方向再次改变浮动的方向图图14.7 交换交换div位置时的效果位置时的效果 实例实例14-06.htm 图图14.8 div被挤到下一行的效果被挤到下一行的效果14.1.7 14.1.7 全部向左浮动全部向左浮动 图图14.9 设置设置3个个div浮动时的效果浮动时的效果 实例实例14-06-02.htm 图图14.10 div挤倒下一行被卡住时的效果挤倒下一行被卡住时的效果14.1.8 14.1.8 使用使用clearclear属性清除浮动的影响属性清除浮动的影响 图图14.11 设置浮动后文字环绕的效果设置浮动后文字环绕的效果

8、 在未浮动的文字在未浮动的文字盒子（如盒子（如p标签）标签）的样式中添加：的样式中添加： clear:left/right/both;实例实例14-07.htm 图图14.12 清除浮动对左侧影响后的效果清除浮动对左侧影响后的效果 图图14.13 清除浮动对右侧影响后的效果清除浮动对右侧影响后的效果14.1.9 14.1.9 扩展盒子的高度扩展盒子的高度 图图14.14 包含浮动包含浮动div的容器将不会适应高度的容器将不会适应高度 实例实例14-08.htm 图图14.15 希望实现的效果希望实现的效果14.2 14.2 盒子的定位盒子的定位 广义的广义的“定位定位”：要将某个元素放到某个位

9、：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使置的时候，这个动作可以称为定位操作，可以使用任何用任何CSSCSS规则来实现，这就是泛指的一个网页排规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样版中的定位操作，使用传统的表格排版时，同样存在定位的问题。存在定位的问题。 狭义的狭义的“定位定位”：在：在CSSCSS中有一个非常重要中有一个非常重要的属性的属性positionposition，这个单词翻译为中文也是定位，这个单词翻译为中文也是定位的意思。的意思。 然而要使用然而要使用CSSCSS进行定位操作并不仅仅通过进行定位操作并不仅仅通过这个属性

10、来实现，因此不要把二者混淆。这个属性来实现，因此不要把二者混淆。 首先，对首先，对positionposition属性的使用方法做一个概属性的使用方法做一个概述，后面再具体举例子说明。述，后面再具体举例子说明。 positionposition属性可以设置为以下属性可以设置为以下4 4个属性值之个属性值之一。一。 （1 1）staticstatic：这是默认的属性值，也就是该：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。盒子按照标准流（包括浮动方式）进行布局。 （2 2）relativerelative：称为相对定位，使用相对定：称为相对定位，使用相对定位的盒子的位置常以

11、标准流的排版方式为基础，位的盒子的位置常以标准流的排版方式为基础，然后使盒子然后使盒子相对于它在原本的标准位置偏移指定相对于它在原本的标准位置偏移指定的距离。的距离。 相对定位的盒子仍在标准流中，它后面的盒相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。子仍以标准流方式对待它。 （3 3）absoluteabsolute：绝对定位，：绝对定位，盒子的位置以它盒子的位置以它的包含框为基准进行偏移的包含框为基准进行偏移。 绝对定位的盒子从标准流中脱离。绝对定位的盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位没有这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个

12、盒子不存在一样。影响，其他的盒子就好像这个盒子不存在一样。 （4 4）fixedfixed：称为固定定位，它和绝对定位：称为固定定位，它和绝对定位类似，只是类似，只是以浏览器窗口为基准进行定位以浏览器窗口为基准进行定位，也就，也就是当拖动浏览器窗口的滚动条时，依然保持对象是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。位置不变。14.2.1 14.2.1 静态定位静态定位图图14.16 没有设置没有设置position属性时的状态属性时的状态实例实例14-09.htm14.2.2 14.2.2 相对定位相对定位1 1一个子块的情况一个子块的情况 图图14.17 一个一个div设置为相对定定

13、位后的效果设置为相对定定位后的效果 实例实例14-10.htm 图图14.18 以右侧和下侧为基准设置相对定定位以右侧和下侧为基准设置相对定定位 2 2两个子块的情况两个子块的情况 图图14.19 设置为相对定位前的效果设置为相对定位前的效果 实例实例14-11.htm 图图14.20 两个兄弟两个兄弟div的情况下，的情况下，其中一个设置为相对定位后的效果其中一个设置为相对定位后的效果3 3结论结论 得出下面两条关于得出下面两条关于“相对定位相对定位”的的定位原则定位原则。 （1 1）使用相对定位的盒子，会相对于它在）使用相对定位的盒子，会相对于它在原本的原本的位置位置，通过偏移指定的距离，

14、到达新的位置。，通过偏移指定的距离，到达新的位置。 （2 2）使用相对定位的盒子仍在标准流中，它）使用相对定位的盒子仍在标准流中，它对父对父块和兄弟盒子没有任何影响块和兄弟盒子没有任何影响。 图图14.21 两个兄弟两个兄弟div都设置为相对定位后的效果都设置为相对定位后的效果 实例实例14-12.htm 图图14.22 在浮动方式下，使用相对定位在浮动方式下，使用相对定位 14.2.3 14.2.3 绝对定位绝对定位 介绍了相对定位以后，下面介绍绝对定位（介绍了相对定位以后，下面介绍绝对定位（absoluteabsolute）。通过上述讲解，可以了解到各种）。通过上述讲解，可以了解到各种po

15、sitionposition属性都需要通过配合偏移一定的距离来属性都需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏实现定位，而其中核心的问题就是以什么作为偏移的基准。移的基准。 1 1创建基础页面创建基础页面 2 2使用绝对定位使用绝对定位 3 3浏览器的浏览器的BugBug与与HackHack 图图14.23 设置绝对定位前的效果设置绝对定位前的效果 实例实例14-13.htm 图图14.24 将中间的将中间的div设置为绝对定位后的效果设置为绝对定位后的效果 图图14.25 设置偏移量后的效果设置偏移量后的效果 实例实例14-14.htm 图图14.26 将父块设置

16、为将父块设置为“包含块包含块”后的效果后的效果 结论结论 得出下面两条关于得出下面两条关于“绝对定位绝对定位”的的定位原则定位原则。 （1 1）使用绝对定位的盒子，以它）使用绝对定位的盒子，以它最近最近的一个的一个已经已经定位定位的的祖先元素祖先元素为基准进行偏移。如果没有祖先为基准进行偏移。如果没有祖先元素，那么会以浏览器窗口为基准进行定位。元素，那么会以浏览器窗口为基准进行定位。 （2 2）绝对定位的框）绝对定位的框从标准流中脱离从标准流中脱离，这意味着它，这意味着它们对其后的兄弟盒子的定位没有影响，们对其后的兄弟盒子的定位没有影响，其他盒子其他盒子就好像这个盒子不存在一样就好像这个盒子不

17、存在一样。绝对定位的特殊性绝对定位的特殊性 例例p213p213.html.html 如果设置了绝对定位，而没有设置偏移属性如果设置了绝对定位，而没有设置偏移属性，那么它将仍保持在原来的位置。，那么它将仍保持在原来的位置。14.2.4 14.2.4 固定定位（固定定位（fixedfixed） 生成绝对定位的元素，相对于浏览器窗口进生成绝对定位的元素，相对于浏览器窗口进行定位。行定位。 元素的位置通过元素的位置通过 left, top, right left, top, right 以及以及 bottom bottom 属性进行规定。属性进行规定。4614. 3 z-index14. 3 z-i

18、ndex空间位置空间位置 z-indexz-index是设置对象的层叠顺序的样式。该样式只对是设置对象的层叠顺序的样式。该样式只对positionposition属性为属性为relativerelative或或absoluteabsolute的对象有效。这的对象有效。这里的层叠顺序也可以说是对象的里的层叠顺序也可以说是对象的“上下顺序上下顺序”。 基本语法：基本语法：z-index: auto, 数字数字 语法说明：语法说明： auto auto遵从其父对象的定位，数字必须是无单位遵从其父对象的定位，数字必须是无单位的整数值，可以取负值。的整数值，可以取负值。z-indexz-index值较大

19、的元素将值较大的元素将叠加在叠加在z-indexz-index值较小的元素之上值较小的元素之上。对于未指定此。对于未指定此属性的定位对象，属性的定位对象，z-indexz-index值为正数的对象会在其值为正数的对象会在其之上，而之上，而z-indexz-index值为负数的对象在其之下值为负数的对象在其之下。实例实例p214.html14. 3 z-index14. 3 z-index空间位置空间位置 仅在定位元素上奏效。也就是只有设置了仅在定位元素上奏效。也就是只有设置了positionposition的值为的值为absoluteabsolute或者或者relativerelative或者

20、或者fixedfixed的时候才有效。的时候才有效。 只能对同级元素有效。只能对同级元素有效。4814. 414. 4盒子的盒子的displaydisplay属性属性实例实例p215-1.html p215-1.html 、p215-2.htmlp215-2.html行内元素的盒子行内元素的盒子 行内元素的盒子永远只能在浏览器中得到行内元素的盒子永远只能在浏览器中得到一行高度一行高度的空的空间（行高由间（行高由line-heightline-height属性决定，如果没设置该属性属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下，则是内容的默认高度），如果给它设置上下borde

21、rborder，marginmargin，paddingpadding等值，导致其盒子的高度超过行高，等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。那么它的盒子上下部分将和其他元素的盒子重叠。 因此，不推荐对行内元素直接设置盒子属性，一般先设因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以置行内元素以块级元素显示块级元素显示，再设置它的盒子属性。，再设置它的盒子属性。 改变行内元素的高度改变行内元素的高度 如图所示，当增加行内元素的边界和填充时，行内如图所示，当增加行内元素的边界和填充时，行内元素元素a a占据浏览器的高度并没有增加，下面这个占据浏览器

22、的高度并没有增加，下面这个divdiv块仍然在原来的位置，导致行内元素盒子的上下部块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响。分重叠，而左右部分不会受影响。 display属性属性 通过通过displaydisplay属性可控制元素是以行内元素显示还属性可控制元素是以行内元素显示还是以块级元素显示，或不显示是以块级元素显示，或不显示 displaydisplay:block:block | inline | none | list-item | inline | none | list-itemblockblock元素元素blockblock元素的特点是：元素的特

23、点是：1.1.总是在新行上开始；总是在新行上开始；2.2.高度，行高以及顶和底边距都可控制；高度，行高以及顶和底边距都可控制；3.3.宽度缺省是它的容器的宽度缺省是它的容器的100%100%，除非用，除非用widthwidth设定设定一个宽度一个宽度, , , , , , , , 和和 是块是块元素的例子。元素的例子。 inline元素元素inlineinline元素的特点是：元素的特点是：和其他元素都在一行上和其他元素都在一行上高，行高及顶和底边距不可改变；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。宽度就是它的文字或图片的宽度，不可改变。, , , , , , ,

24、 , , , 和和 是是inlineinline元素的例子元素的例子 列表项元素列表项元素display: list-item 在在htmlhtml中只有中只有lili元素默认是此类型，将元素设置元素默认是此类型，将元素设置为列表项元素后将按列表元素显示，再通过设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。列表选项可使元素的左边出现小黑点。 隐藏元素隐藏元素display: none 当某个元素被设置成了隐藏元素之后，浏览器会当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也完全忽略掉这个元素，该元素将不会被显示，也不会占据文

25、档中的位置。像不会占据文档中的位置。像titletitle元素默认就是此元素默认就是此类型。类型。 比较比较visibility: hidden; visibility: hidden; 制作下拉菜单、制作下拉菜单、tabtab面板等有时就需要用面板等有时就需要用display: display: nonenone把菜单或面板隐藏起来把菜单或面板隐藏起来需要使用需要使用display属性切换的情况属性切换的情况1.1. 让一个让一个inlineinline元素从新行开始；元素从新行开始；2.2. 让块元素和其他元素保持在一行上；让块元素和其他元素保持在一行上；3.3. 控制控制inlineinline元素的宽度元素的宽度; ;4.4. 控制控制inlineinline元素的高度（对导航条特别有用）；元素的高度（对导航条特别有用）；5.5. 无须设定宽度即可为一个块元素设定与文字同宽无须设定宽度即可为一个块元素设定与文字同宽的背景色的背景色 Display属性的应