您所在位置：网站首页 > 高等教育 > 大学课件网页制作综合技术教程教学课件 ppt 温谦赵伟胡静李占波第14章盒子的浮动与定位

网页制作综合技术教程教学课件 ppt 温谦赵伟胡静李占波第14章盒子的浮动与定位

45页

卖家[上传人]：E****

文档编号：89443704

上传时间：2019-05-25

文档格式：PPT

文档大小：1.50MB

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

10 金贝

/ 45 举报版权申诉马上下载

文本预览

下载提示

常见问题

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位置时的效果,图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 包含浮动d

2、iv的容器将不会适应高度,图14.15 希望实现的效果,14.2 盒子的定位,（1）广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。,（2）狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。, static：静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。, relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。, absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。, fixed：称为固定定位，它和绝对

3、定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。,14.2.1 静态定位 14.2.2 相对定位 1实验1一个子块的情况,图14.17 一个div设置为相对定位后的效果,图14.18 以右侧和下侧为基准设置相对定位,2实验2两个子块的情况,图14.19 设置为相对定位前的效果,图14.20 两个兄弟div之一设置为相对定位后的效果,3结论,下面是两条关于“相对定位”的定位原则。,（1）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。,（2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。,14.2.3 绝对定位,1准备网页代码 2案例使用绝对定位,图14.23 设置绝对定位前的效果,图14.24 将中间的div设置为绝对定位后的效果,图14.25 设置偏移量后的效果,图14.26 将父块设置为“包含块”后的效果,对于绝对定位的正确描述如下。, 使用绝对定位的盒子以它的“最近” 一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。, 绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。,在上述的第一条原则中，有3个带引号的定语，需要进行一些解释。,（1）关于“最近”，在一个节点的所有祖先节点中，找出所有“已经定位”的元素，其中距离该节点最近的一个节点，父亲比祖父近，祖父比曾祖父近，以此类推，“最近” 的就是要找的定位基准。,（2）所谓“已经定位”元素的含义是， position属性被设置，并且被设置为不是 static的任意一种方式，那么该元素就被定义为“已经定位”的元素。,（3）关于“祖先”元素，如果结合本章最前面介绍的“DOM树”的知识，就可以理解了。从任意节点开始，走到根节点，经过的所有节点都是它的祖先，其中直接上级节点是它的父亲，以此类推。,

《网页制作综合技术教程教学课件 ppt 温谦赵伟胡静李占波第14章盒子的浮动与定位》由会员E****分享，可在线阅读，更多相关《网页制作综合技术教程教学课件 ppt 温谦赵伟胡静李占波第14章盒子的浮动与定位》请在金锄头文库上搜索。

点击阅读更多内容

TA的资源