第14章盒子的浮动与定位分析
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
是它的父亲，以此类推。
14.3 z-index 空间位置
• z-index可正、负整数和零 • z-index属性用调整重叠块的上下关系，大
的位于上面，小的位于下面。 • 当块被设置了的position属性时，z-index
属性才起作用。
第14章 盒子的浮动与定位
14.1
盒子的浮动
14.2
盒子的定位
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浮动时的效果
下面是两条关于“相对定位”的定位原 则。
（1）使用相对定位的盒子，会相对于 它在原本的位置，通过偏移指定的距离，到 达新的位置。
（2）使用相对定位的盒子仍在标准流 中，它对父块和兄弟盒子没有任何影响。
14.2.3 绝对定位
1．准备网页代码 2．案例——使用绝对定位
图14.23 设置绝对定位前的效果
（2）所谓“已经定位”元素的含义是，
position属性被设置，并且被设置为不 是 static的任意一种方式，那么该元素 就被定义 为“已经定位”的元素。
（3）关于“祖先”元素，如果结合本 章
最前面介绍的“DOM树”的知识，就可以理 解
了。
从任意节点开始，走到根节点，经过的 所有节点都是它的祖先，其中直接上级节点
● 绝对定位的框从标准流中脱离，这 意味着它们对其后的兄弟盒子的定位没有影 响，其他的盒子就好像这个盒子不存在一样。
在上述的第一条原则中，有3个带引号 的定语，需要进行一些解释。
（1）关于“最近”，在一个节点的所 有 祖先节点中，找出所有“已经定位”的元素， 其中距离该节点最近的一个节点，父亲比祖 父近，祖父比曾祖父近，以此类推，“最近” 的就是要找的定位基准。
14.1.9 实验8——扩展盒子的高度
图14.14 包含浮动div的容器将不会适应高度
图14.15 希望实现的效果
ຫໍສະໝຸດ Baidu
14.2 盒子的定位
（1）广义的“定位”：要将某个元素 放 到某个位置的时候，这个动作可以称为定位 操作，可以使用任何CSS规则来实现，这就 是泛指的一个网页排版中的定位操作，使用 传统的表格排版时，同样存在定位的问题。
14.1.7 实验6——全部向左浮动
图14.9 设置3个div浮动时的效果
图14.10 div挤倒下一行被卡住时的效果
14.1.8 实验7——使用clear属性清除浮动的影响
图14.11 设置浮动后文字环绕的效果
图14.12 清除浮动对左侧影响后的效果
图14.13 清除浮动对右侧影响后的效果
图14.24 将中间的div设置为绝对定位后的效果
图14.25 设置偏移量后的效果
图14.26 将父块设置为“包含块”后的效果
对于绝对定位的正确描述如下。
● 使用绝对定位的盒子以它的“最近”
一个“已经定位”的“祖先元素”为基准进 行偏
移。 如果没有已经定位的祖先元素，那么会
以浏览器窗口为基准进行定位。
相对定位的盒子仍在标准流中，它后面 的盒子仍以标准流方式对待它。
● absolute：绝对定位，盒子的位置 以它的包含框为基准进行偏移。绝对定位的 盒子从标准流中脱离。
这意味着它们对其后的兄弟盒子的定位 没有影响，其他的盒子就好像这个盒子不存 在一样。
● fixed：称为固定定位，它和绝对 定位类似，只是以浏览器窗口为基准进行定 位，也就是当拖动浏览器窗口的滚动条时， 依然保持对象位置不变。
（2）狭义的“定位”：在CSS中有一 个 非常重要的属性position，这个单词翻译为 中文也是定位的意思。
然而要使用CSS进行定位操作并不仅仅 通过这个属性来实现，因此不要把二者混淆。
● static：静态定位，这是默认的属 性值，也就是该盒子按照标准流（包括浮动 方式）进行布局。
● relative：相对定位，使用相对定 位的盒子的位置常以标准流的排版方式为基 础，然后使盒子相对于它在原本的标准位置 偏移指定的距离。
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位置时的效果
图14.8 div被挤到下一行的效果
14.2.1 静态定位 14.2.2 相对定位
1．实验1——一个子块的情况
图14.17 一个div设置为相对定位后的效果
图14.18 以右侧和下侧为基准设置相对定位
2．实验2——两个子块的情况
图14.19 设置为相对定位前的效果
图14.20 两个兄弟div之一设置为相对定位后的效果
3．结论
14.3 z-index 空间位置
• z-index可正、负整数和零 • z-index属性用调整重叠块的上下关系，大
的位于上面，小的位于下面。 • 当块被设置了的position属性时，z-index
属性才起作用。
第14章 盒子的浮动与定位
14.1
盒子的浮动
14.2
盒子的定位
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浮动时的效果
下面是两条关于“相对定位”的定位原 则。
（1）使用相对定位的盒子，会相对于 它在原本的位置，通过偏移指定的距离，到 达新的位置。
（2）使用相对定位的盒子仍在标准流 中，它对父块和兄弟盒子没有任何影响。
14.2.3 绝对定位
1．准备网页代码 2．案例——使用绝对定位
图14.23 设置绝对定位前的效果
（2）所谓“已经定位”元素的含义是，
position属性被设置，并且被设置为不 是 static的任意一种方式，那么该元素 就被定义 为“已经定位”的元素。
（3）关于“祖先”元素，如果结合本 章
最前面介绍的“DOM树”的知识，就可以理 解
了。
从任意节点开始，走到根节点，经过的 所有节点都是它的祖先，其中直接上级节点
● 绝对定位的框从标准流中脱离，这 意味着它们对其后的兄弟盒子的定位没有影 响，其他的盒子就好像这个盒子不存在一样。
在上述的第一条原则中，有3个带引号 的定语，需要进行一些解释。
（1）关于“最近”，在一个节点的所 有 祖先节点中，找出所有“已经定位”的元素， 其中距离该节点最近的一个节点，父亲比祖 父近，祖父比曾祖父近，以此类推，“最近” 的就是要找的定位基准。
14.1.9 实验8——扩展盒子的高度
图14.14 包含浮动div的容器将不会适应高度
图14.15 希望实现的效果
ຫໍສະໝຸດ Baidu
14.2 盒子的定位
（1）广义的“定位”：要将某个元素 放 到某个位置的时候，这个动作可以称为定位 操作，可以使用任何CSS规则来实现，这就 是泛指的一个网页排版中的定位操作，使用 传统的表格排版时，同样存在定位的问题。
14.1.7 实验6——全部向左浮动
图14.9 设置3个div浮动时的效果
图14.10 div挤倒下一行被卡住时的效果
14.1.8 实验7——使用clear属性清除浮动的影响
图14.11 设置浮动后文字环绕的效果
图14.12 清除浮动对左侧影响后的效果
图14.13 清除浮动对右侧影响后的效果
图14.24 将中间的div设置为绝对定位后的效果
图14.25 设置偏移量后的效果
图14.26 将父块设置为“包含块”后的效果
对于绝对定位的正确描述如下。
● 使用绝对定位的盒子以它的“最近”
一个“已经定位”的“祖先元素”为基准进 行偏
移。 如果没有已经定位的祖先元素，那么会
以浏览器窗口为基准进行定位。
相对定位的盒子仍在标准流中，它后面 的盒子仍以标准流方式对待它。
● absolute：绝对定位，盒子的位置 以它的包含框为基准进行偏移。绝对定位的 盒子从标准流中脱离。
这意味着它们对其后的兄弟盒子的定位 没有影响，其他的盒子就好像这个盒子不存 在一样。
● fixed：称为固定定位，它和绝对 定位类似，只是以浏览器窗口为基准进行定 位，也就是当拖动浏览器窗口的滚动条时， 依然保持对象位置不变。
（2）狭义的“定位”：在CSS中有一 个 非常重要的属性position，这个单词翻译为 中文也是定位的意思。
然而要使用CSS进行定位操作并不仅仅 通过这个属性来实现，因此不要把二者混淆。
● static：静态定位，这是默认的属 性值，也就是该盒子按照标准流（包括浮动 方式）进行布局。
● relative：相对定位，使用相对定 位的盒子的位置常以标准流的排版方式为基 础，然后使盒子相对于它在原本的标准位置 偏移指定的距离。
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位置时的效果
图14.8 div被挤到下一行的效果
14.2.1 静态定位 14.2.2 相对定位
1．实验1——一个子块的情况
图14.17 一个div设置为相对定位后的效果
图14.18 以右侧和下侧为基准设置相对定位
2．实验2——两个子块的情况
图14.19 设置为相对定位前的效果
图14.20 两个兄弟div之一设置为相对定位后的效果
3．结论