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

第14章 盒子的浮动与定位 14.1 盒子的浮动 14.1.1 准备代码 14.1.2 实验1——设置第1个浮动的div 14.1.3 实验2——设置第2个浮动的div 14.1.4 实验3——设置第3个浮动的div 14.1.5 实验4——改变浮动的方向 14.1.6 实验5——再次改变浮动的方向 14.1.7 实验6——全部向左浮动 14.1.8 实验7——使用clear属性清除浮动的影响 14.1.9 实验8——扩展盒子的高度 14.2 盒子的定位 （1）广义的“定位”：要将某个元素放 到某个位置的时候，这个动作可以称为定位 操作，可以使用任何CSS规则来实现，这就 是泛指的一个网页排版中的定位操作，使用 传统的表格排版时，同样存在定位的问题。 （2）狭义的“定位”：在CSS中有一个 非常重要的属性position，这个单词翻译为 中文也是定位的意思。 然而要使用CSS进行定位操作并不仅仅 通过这个属性来实现，因此不要把二者混淆。 ● static：静态定位，这是默认的属 性值，也就是该盒子按照标准流（包括浮动 方式）进行布局。 ● relative：相对定位，使用相对定 位的盒子的位置常以标准流的排版方式为基 础，然后使盒子相对于它在原本的标准位置 偏移指定的距离。 相对定位的盒子仍在标准流中，它后面 的盒子仍以标准流方式对待它。 ● absolute：绝对定位，盒子的位置 以它的包含框为基准进行偏移。绝对定位的 盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位 没有影响，其他的盒子就好像这个盒子不存 在一样。 ● fixed：称为固定定位，它和绝对 定位类似，只是以浏览器窗口为基准进行定 位，也就是当拖动浏览器窗口的滚动条时， 依然保持对象位置不变。 14.2.1 静态定位 14.2.2 相对定位 1．实验1——一个子块的情况 2．实验2——两个子块的情况 3．结论 下面是两条关于“相对定位”的定位原则。 （1）使用相对定位的盒子，会相对于 它在原本的位置，通过偏移指定的距离，到 达新的位置。 （2）使用相对定位的盒子仍在标准流 中，它对父块和兄弟盒子没有任何影响。 14.2.3 绝对定位 1．准备网页代码 2．案例——使用绝对定位 对于绝对定位的正确描述如下。 ● 使用绝对定位的盒子以它的“最近” 一个“已经定位”的“祖先元素”为基准进行偏 移。 如果没有已经定位的祖先元素，那么会 以浏览器窗口为基准进行定位。 ● 绝对定位的框从标准流中脱离，这 意味着它们对其后的兄弟盒子的定位没有影 响，其他的盒子就好像这个盒子不存在一样。  在上述的第一条原则中，有3个带引号 的定语，需要进行一些解释。 （1）关于“最近”，在一个节点的所有 祖先节点中，找出所有“已经定位”的元素， 其中距离该节点最近的一个节点，父亲比祖 父近，祖父比曾祖父近，以此类推，“最近” 的就是要找的定位基准。 （2）所谓“已经定位”元素的含义是， position属性被设置，并且被设置为不 是 static的任意一种方式，那么该元素 就被定义 为“已经定位”的元素。 （3）关于“祖先”元素，如果结合本章 最前面介绍的“DOM树”的知识，就可以理解 了。 从任意节点开始，走到根节点，经过的 所有节点都是它的祖先，其中直接上级节点 是它的父亲，以此类推。 14.3 z-index 空间位置 z-index可正、负整数和零 z-index属性用调整重叠块的上下关系，大的位于上面，小的位于下面。 当块被设置了的position属性时，z-index属性才起作用。 ?图14.23 设置绝对定位前的效果 图14.24 将中间的div设置为绝对定位后的效果 图14.25 设置偏移量后的效果 图14.26 将父块设置为“包含块”后的效果 * * 盒子的浮动 14.1 盒子的定位 14.2 图14.1 没有设置浮动时的效果 图14.2 设置第1个div浮动时的效果 图14.3 设置前两个div浮动时的效果 图14.4 设置第3个div浮动时的效果 图14.5 改变浮动方向后的效果 图14.6 div被挤到下一行时的效果 图14.7 交换div位置时的效果 图14.8 div被挤到下一行的效果 图14.9 设置3个div浮动时的效果 图14.10 div挤倒下一行被卡住时的效果