第14章盒子的浮动与定位.ppt

1、网页制作综合技术教程网页制作综合技术教程第第4部分部分 CSS页面布局设计页面布局设计 盒子的浮动盒子的浮动14.114.1盒子的定位盒子的定位14.214.214.1 14.1 盒子的浮动盒子的浮动14.1.1 14.1.1 准备代码准备代码 图图14.1 没有设置浮动时的效果没有设置浮动时的效果14.1.2 14.1.2 实验实验1 1设置第设置第1 1个浮动的个浮动的divdiv图图14.2 设置第设置第1个个div浮动时的效果浮动时的效果14.1.3 14.1.3 实验实验2 2设置第设置第2 2个浮动的个浮动的divdiv图图14.3 设置前两个设置前两个div浮动时的效果浮动时的效

2、果14.1.4 14.1.4 实验实验3 3设置第设置第3 3个浮动的个浮动的divdiv图图14.4 设置第设置第3个个div浮动时的效果浮动时的效果14.1.5 14.1.5 实验实验4 4改变浮动的方向改变浮动的方向 图图14.5 改变浮动方向后的效果改变浮动方向后的效果 图图14.6 div被挤到下一行时的效果被挤到下一行时的效果14.1.6 14.1.6 实验实验5 5再次改变浮动的方向再次改变浮动的方向 图图14.7 交换交换div位置时的效果位置时的效果 图图14.8 div被挤到下一行的效果被挤到下一行的效果14.1.7 14.1.7 实验实验6 6全部向左浮动全部向左浮动图图

3、14.9 设置设置3个个div浮动时的效果浮动时的效果 图图14.10 div挤倒下一行被卡住时的效果挤倒下一行被卡住时的效果 14.1.8 14.1.8 实验实验7 7使用使用clearclear属性清除浮动的影响属性清除浮动的影响图图14.11 设置浮动后文字环绕的效果设置浮动后文字环绕的效果 图图14.12 清除浮动对左侧影响后的效果清除浮动对左侧影响后的效果 图图14.13 清除浮动对右侧影响后的效果清除浮动对右侧影响后的效果14.1.9 14.1.9 实验实验8 8扩展盒子的高度扩展盒子的高度 图图14.14 包含浮动包含浮动div的容器将不会适应高度的容器将不会适应高度 图图14.

4、15 希望实现的效果希望实现的效果14.2 14.2 盒子的定位盒子的定位（1）广义的）广义的“定位定位”：要将某个元素：要将某个元素放放到某个位置的时候，这个动作可以称为定位到某个位置的时候，这个动作可以称为定位操作，可以使用任何操作，可以使用任何CSS规则来实现，这就规则来实现，这就是泛指的一个网页排版中的定位操作，使用是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。传统的表格排版时，同样存在定位的问题。 （2）狭义的）狭义的“定位定位”：在：在CSS中有一中有一个个非常重要的属性非常重要的属性position，这个单词翻译为，这个单词翻译为中文也是定位的意思。

5、中文也是定位的意思。然而要使用然而要使用CSS进行定位操作并不仅仅进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。通过这个属性来实现，因此不要把二者混淆。 static：静态定位，这是默认的属：静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动性值，也就是该盒子按照标准流（包括浮动方式）进行布局。方式）进行布局。 relative：相对定位，使用相对定：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置础，然后使盒子相对于它在原本的标准位置偏移指定的距离。偏移指定的距离。相对定位的盒子仍在

6、标准流中，它后面相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。的盒子仍以标准流方式对待它。 absolute：绝对定位，盒子的位置：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存没有影响，其他的盒子就好像这个盒子不存在一样。在一样。 fixed：称为固定定位，它和绝对：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览

7、器窗口的滚动条时，位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。依然保持对象位置不变。 14.2.1 14.2.1 静态定位静态定位14.2.2 14.2.2 相对定位相对定位1 1实验实验11一个子块的情况一个子块的情况 图图14.17 一个一个div设置为相对定位后的效果设置为相对定位后的效果 图图14.18 以右侧和下侧为基准设置相对定位以右侧和下侧为基准设置相对定位2 2实验实验22两个子块的情况两个子块的情况 图图14.19 设置为相对定位前的效果设置为相对定位前的效果 图图14.20 两个兄弟两个兄弟div之一设置为相对定位后的效果之一设置为相对定位后的效果 3 3结

8、论结论下面是两条关于下面是两条关于“相对定位相对定位”的定位原的定位原则。则。 （1）使用相对定位的盒子，会相对于）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到它在原本的位置，通过偏移指定的距离，到达新的位置。达新的位置。 （2）使用相对定位的盒子仍在标准流）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。中，它对父块和兄弟盒子没有任何影响。14.2.3 14.2.3 绝对定位绝对定位1 1准备网页代码准备网页代码2 2案例案例使用绝对定位使用绝对定位 图图14.23 设置绝对定位前的效果设置绝对定位前的效果 图图14.24 将中间的将中间的div设置为绝

9、对定位后的效果设置为绝对定位后的效果 图图14.25 设置偏移量后的效果设置偏移量后的效果 图图14.26 将父块设置为将父块设置为“包含块包含块”后的效果后的效果 对于绝对定位的正确描述如下。对于绝对定位的正确描述如下。 使用绝对定位的盒子以它的使用绝对定位的盒子以它的“最近最近”一个一个“已经定位已经定位”的的“祖先元素祖先元素”为基准进为基准进行偏行偏移。移。如果没有已经定位的祖先元素，那么会如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。以浏览器窗口为基准进行定位。 绝对定位的框从标准流中脱离，这绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影意味着它

10、们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。响，其他的盒子就好像这个盒子不存在一样。在上述的第一条原则中，有在上述的第一条原则中，有3个带引号个带引号的定语，需要进行一些解释。的定语，需要进行一些解释。 （1）关于）关于“最近最近”，在一个节点的所，在一个节点的所有有祖先节点中，找出所有祖先节点中，找出所有“已经定位已经定位”的元素，的元素，其中距离该节点最近的一个节点，父亲比祖其中距离该节点最近的一个节点，父亲比祖父近，祖父比曾祖父近，以此类推，父近，祖父比曾祖父近，以此类推，“最近最近”的就是要找的定位基准。的就是要找的定位基准。 （2）所谓）所谓“已经定位已经定位”元素的含义是，元素的含义是，position属性被设置，并且被设置为不属性被设置，并且被设置为不是是static的任意一种方式，那么该元素的任意一种方式，那么该元素就被定义就被定义为为“已经定位已经定位”的元素。的元素。 （3）关于）关于“祖先祖先”元素，如果结合本元素，如果结合本章章最前面介绍的最前面介绍的“DOM树树”的知识，就可以理的知识，就可以理解解了。了。从任意节点开始，走到根节点，经过的从任意节点开始，走到根节点，经过的所有节点都是它的祖先，其中直接上级节点所有节点都是它的祖先，其中直接上级节点是它的父亲，以此类推。是它的父亲，以此类推。