第12课 CSS浮动与定位精要.pptVIP

图10.1 阵列模式 图10.2 单列模式 18.1 搭 建 框 架 18.1 搭 建 框 架 18.1 搭 建 框 架 具体代码见第18章/basic.htm 18.2 阵 列 模 式 18.2 阵 列 模 式 18.2 阵 列 模 式 具体实现步骤见P294~297,代码见第18章/matrix.htm 18.3 单 列 模 式 18.3 单 列 模 式 具体实现步骤见P298~301,代码见第18章/list.htm 18.3 单 列 模 式 18.3 单 列 模 式 18.3 单 列 模 式 18.3 单 列 模 式 18.4 改进阵列模式 具体实现步骤见P301~301,代码见第18章/matix-info-ff.htm 18.4 改进阵列模式 18.4 改进阵列模式 18.4 改进阵列模式 18.4 双向联动模式 18.4 双向联动模式 * 练 习 题 1. 设计如图的布局图片.jpg的网页 2. 将各案例在机器上实现 （4）fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。 12.2.1 静态定位 图12.16 没有设置position属性时的状态 实例14-09.htm 12.2.2 相对定位 1．一个子块的情况 图12.17 一个div设置为相对定定位后的效果 实例14-10.htm 图12.18 以右侧和下侧为基准设置相对定定位 2．两个子块的情况 图12.19 设置为相对定位前的效果 实例12-11.htm 图12.20 两个兄弟div的情况下， 其中一个设置为相对定位后的效果 3．结论 得出下面两条关于“相对定位”的定位原则。 （1）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。 （2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。 图12.21 两个兄弟div都设置为相对定位后的效果 实例12-12.htm 图12.22 在浮动方式下，使用相对定位 12.2.3 绝对定位 介绍了相对定位以后，下面介绍绝对定位（absolute）。通过上述讲解，可以了解到各种position属性都需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。绝对定位是相对于它最近的被定位过（一定有position）的父亲盒子. 1．创建基础页面 2．使用绝对定位 3．浏览器的Bug与Hack 图12.23 设置绝对定位前的效果 实例12-13.htm 图12.24 将中间的div设置为绝对定位后的效果 图12.25 设置偏移量后的效果 实例12-12.htm 图12.26 将父块设置为“包含块”后的效果 * 12. 3 z-index空间位置 z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。这里的层叠顺序也可以说是对象的“上下顺序”。 基本语法： z-index:auto,数字 语法说明： auto遵从其父对象的定位，数字必须是无单位的整数值，可以取负值。z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index值为正数的对象会在其之上，而z-index值为负数的对象在其之下。 实例13/13.4.3/00000.html、z-index.html * 12. 4盒子的display属性 标准流下的盒子排列分析 style type=text/css * { border: 2px dashed #FF0066; padding: 10px; margin: 2px; } body {border:2px solid blue;} a {border:2px dotted blue;} /style htmlbody div网页的banner（块级元素）/div a href=#行内元素1/aa href=#行内2/a a href=#行内3/a div这是无名块p这是盒子中的盒子/p/div /body/html 行内元素的盒子 行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒