第5章盒子的浮动与定位.

1、CSS+DIVCSS+DIV网页样式与布局网页样式与布局第第1 1部分部分 CSSCSS核心原理核心原理 盒子的浮动盒子的浮动5.1盒子的定位盒子的定位5.2 第第4 4章介绍了独立的盒子模型，以及在章介绍了独立的盒子模型，以及在标准流情况下的盒子的相互关系。标准流情况下的盒子的相互关系。 如果仅仅按照标准流的方式进行排版，如果仅仅按照标准流的方式进行排版，就只能按照仅有的几种可能性进行排版，就只能按照仅有的几种可能性进行排版，限制太大。限制太大。 CSS CSS的制定者也想到了排版限制的问题，的制定者也想到了排版限制的问题，因此又给出了若干不同的手段以实现各种因此又给出了若干不同的手段以实现

2、各种排版需要，从而可以灵活地实现各种形式排版需要，从而可以灵活地实现各种形式的排版要求。的排版要求。 本章介绍本章介绍CSSCSS中中floatfloat和和positionposition这两这两个重要属性的应用。个重要属性的应用。5.1 5.1 盒子的浮动盒子的浮动 在标准流中，一个块级元素在水平方在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能而在竖直方向和兄弟元素依次排列，不能并排。并排。 使用使用“浮动浮动”方式后，块级元素的表方式后，块级元素的表现就会有所不同。现就会有所不同。 CSS

3、CSS中有一个中有一个floatfloat属性，默认为属性，默认为nonenone，也就是标准流通常的情况。也就是标准流通常的情况。 如果将如果将floatfloat属性的值设置为属性的值设置为leftleft或或rightright，元素就会向其父元素的左侧或右侧，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的伸展，而是收缩，根据盒子里面的内容的宽度来确定。宽度来确定。5.1.1 5.1.1 制作基础页面制作基础页面 浮动的性质比较复杂，这里先制作一浮动的性质比较复杂，这里先制作一个基础的页面，代码如

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

5、.2 设置第设置第1个个div浮动时的效果浮动时的效果5.1.3 5.1.3 设置第设置第2 2个浮动的个浮动的divdiv图图5.3 设置前两个设置前两个div浮动时的效果浮动时的效果5.1.4 5.1.4 设置第设置第3 3个浮动的个浮动的divdiv图图5.4 设置第设置第3个个div浮动时的效果浮动时的效果5.1.5 5.1.5 改变浮动的方向改变浮动的方向 图图5.5 改变浮动方向后的效果改变浮动方向后的效果 图图5.6 div被挤到下一行时的效果被挤到下一行时的效果 5.1.6 5.1.6 再次改变浮动的方向再次改变浮动的方向图图5.7 交换交换div位置时的效果位置时的效果 图图

6、5.8 div被挤到下一行的效果被挤到下一行的效果5.1.7 5.1.7 全部向左浮动全部向左浮动 图图5.9 设置设置3个个div浮动时的效果浮动时的效果 图图5.10 div挤倒下一行被卡住时的效果挤倒下一行被卡住时的效果5.1.8 5.1.8 使用使用clearclear属性清除浮动的影响属性清除浮动的影响 图图5.11 设置浮动后文字环绕的效果设置浮动后文字环绕的效果 图图5.12 清除浮动对左侧影响后的效果清除浮动对左侧影响后的效果 图图5.13 清除浮动对右侧影响后的效果清除浮动对右侧影响后的效果5.1.9 5.1.9 扩展盒子的高度扩展盒子的高度 图图5.14 包含浮动包含浮动d

7、iv的容器将不会适应高度的容器将不会适应高度 图图5.15 希望实现的效果希望实现的效果5.2 5.2 盒子的定位盒子的定位 广义的广义的“定位定位”：要将某个元素放到：要将某个元素放到某个位置的时候，这个动作可以称为定位某个位置的时候，这个动作可以称为定位操作，可以使用任何操作，可以使用任何CSSCSS规则来实现，这就规则来实现，这就是泛指的一个网页排版中的定位操作，使是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问用传统的表格排版时，同样存在定位的问题。题。 狭义的狭义的“定位定位”：在：在CSSCSS中有一个非常中有一个非常重要的属性重要的属性positionpo

8、sition，这个单词翻译为中，这个单词翻译为中文也是定位的意思。文也是定位的意思。 然而要使用然而要使用CSSCSS进行定位操作并不仅仅进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混通过这个属性来实现，因此不要把二者混淆。淆。 首先，对首先，对positionposition属性的使用方法做属性的使用方法做一个概述，后面再具体举例子说明。一个概述，后面再具体举例子说明。 positionposition属性可以设置为以下属性可以设置为以下4 4个属性个属性值之一。值之一。 （1 1）staticstatic：这是默认的属性值，也：这是默认的属性值，也就是该盒子按照标准流（包括浮动方

9、式）就是该盒子按照标准流（包括浮动方式）进行布局。进行布局。 （2 2）relativerelative：称为相对定位，使用：称为相对定位，使用相对定位的盒子的位置常以标准流的排版相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。的标准位置偏移指定的距离。 相对定位的盒子仍在标准流中，它后相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。面的盒子仍以标准流方式对待它。 （3 3）absoluteabsolute：绝对定位，盒子的位：绝对定位，盒子的位置以它的包含框为基准进行偏移。置以它的包含框为基准

10、进行偏移。 绝对定位的盒子从标准流中脱离。绝对定位的盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不没有影响，其他的盒子就好像这个盒子不存在一样。存在一样。 （4 4）fixedfixed：称为固定定位，它和绝对：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。时，依然保持对象位置不变。5.2.1 5.2.1 静态定位静态定位图图5.16 没有设置没有设置position属性

11、时的状态属性时的状态5.2.2 5.2.2 相对定位相对定位1 1一个子块的情况一个子块的情况 图图5.17 一个一个div设置为相对定定位后的效果设置为相对定定位后的效果 图图5.18 以右侧和下侧为基准设置相对定定位以右侧和下侧为基准设置相对定定位 2 2两个子块的情况两个子块的情况 图图5.19 设置为相对定位前的效果设置为相对定位前的效果 图图5.20 两个兄弟两个兄弟div的情况下，的情况下，其中一个设置为相对定位后的效果其中一个设置为相对定位后的效果3 3结论结论 得出下面两条关于得出下面两条关于“相对定位相对定位”的定位的定位原则。原则。 （1 1）使用相对定位的盒子，会相对于）

12、使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，它在原本的位置，通过偏移指定的距离，到达新的位置。到达新的位置。 （2 2）使用相对定位的盒子仍在标准流）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。中，它对父块和兄弟盒子没有任何影响。 图图5.21 两个兄弟两个兄弟div都设置为相对定位后的效果都设置为相对定位后的效果 图图5.22 在浮动方式下，使用相对定位在浮动方式下，使用相对定位 5.2.3 5.2.3 绝对定位绝对定位 介绍了相对定位以后，下面介绍绝对介绍了相对定位以后，下面介绍绝对定位（定位（absoluteabsolute）。）。 通过上述讲解，可以了解到各种通过上述讲解，可以了解到各种positionposition属性都需要通过配合偏移一定的属性都需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。以什么作为偏移的基准。 1 1创建基础页面