CSS页面布局设计.ppt

1、网页制作综合技术教程,第4部分 CSS页面布局设计,第14章 盒子的浮动与定位,14.1 盒子的浮动,14.1.1 准备代码,图14.1 没有设置浮动时的效果,14.1.2 实验1设置第1个浮动的div,图14.2 设置第1个div浮动时的效果,14.1.3 实验2设置第2个浮动的div,图14.3 设置前两个div浮动时的效果,14.1.4 实验3设置第3个浮动的div,图14.4 设置第3个div浮动时的效果,14.1.5 实验4改变浮动的方向,图14.5 改变浮动方向后的效果,图14.6 div被挤到下一行时的效果,14.1.6 实验5再次改变浮动的方向,图14.7 交换div位置时的效

2、果,图14.8 div被挤到下一行的效果,14.1.7 实验6全部向左浮动,图14.9 设置3个div浮动时的效果,图14.10 div挤倒下一行被卡住时的效果,14.1.8 实验7使用clear属性清除浮动的影响,图14.11 设置浮动后文字环绕的效果,图14.12 清除浮动对左侧影响后的效果,图14.13 清除浮动对右侧影响后的效果,14.1.9 实验8扩展盒子的高度,图14.14 包含浮动div的容器将不会适应高度,图14.15 希望实现的效果,14.2 盒子的定位,（1）广义的“定位”：要将某个元素放 到某个位置的时候，这个动作可以称为定位 操作，可以使用任何CSS规则来实现，这就 是

3、泛指的一个网页排版中的定位操作，使用 传统的表格排版时，同样存在定位的问题。,（2）狭义的“定位”：在CSS中有一个 非常重要的属性position，这个单词翻译为 中文也是定位的意思。 然而要使用CSS进行定位操作并不仅仅 通过这个属性来实现，因此不要把二者混淆。,static：静态定位，这是默认的属 性值，也就是该盒子按照标准流（包括浮动 方式）进行布局。,relative：相对定位，使用相对定 位的盒子的位置常以标准流的排版方式为基 础，然后使盒子相对于它在原本的标准位置 偏移指定的距离。 相对定位的盒子仍在标准流中，它后面 的盒子仍以标准流方式对待它。,absolute：绝对定位，盒子

4、的位置 以它的包含框为基准进行偏移。绝对定位的 盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位 没有影响，其他的盒子就好像这个盒子不存 在一样。,fixed：称为固定定位，它和绝对 定位类似，只是以浏览器窗口为基准进行定 位，也就是当拖动浏览器窗口的滚动条时， 依然保持对象位置不变。,14.2.1 静态定位 14.2.2 相对定位 1实验1一个子块的情况,图14.17 一个div设置为相对定位后的效果,图14.18 以右侧和下侧为基准设置相对定位,2实验2两个子块的情况,图14.19 设置为相对定位前的效果,图14.20 两个兄弟div之一设置为相对定位后的效果,3结论,下面是两条关

5、于“相对定位”的定位原则。,（1）使用相对定位的盒子，会相对于 它在原本的位置，通过偏移指定的距离，到 达新的位置。,（2）使用相对定位的盒子仍在标准流 中，它对父块和兄弟盒子没有任何影响。,14.2.3 绝对定位,1准备网页代码 2案例使用绝对定位,图14.23 设置绝对定位前的效果,图14.24 将中间的div设置为绝对定位后的效果,图14.25 设置偏移量后的效果,图14.26 将父块设置为“包含块”后的效果,对于绝对定位的正确描述如下。, 使用绝对定位的盒子以它的“最近” 一个“已经定位”的“祖先元素”为基准进行偏 移。如果没有已经定位的祖先元素，那么会 以浏览器窗口为基准进行定位。, 绝对定位的框从标准流中脱离，这 意味着它们对其后的兄弟盒子的定位没有影 响，其他的盒子就好像这个盒子不存在一样。,在上述的第一条原则中，有3个带引号 的定语，需要进行一些解释。,（1）关于“最近”，在一个节点的所有 祖先节点中，找出所有“已经定位”的元素， 其中距离该节点最近的一个节点，父亲比祖 父近，祖父比曾祖父近，以此类推，“最近” 的就是要找的定位基准。,（2）所谓“已经定位”元素的含义是， position属性被设置，并且被设置为不是 static的任意一种方式，那么该元素就被定义 为“已经定位”的元素。,（3