盒子的浮动与定位.pptVIP

狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。 然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。 首先，对position属性的使用方法做一个概述，后面再具体举例子说明。 position属性可以设置为以下4个属性值之一。 1.Static静态定位 2.Relative相对定位 3.Absolute绝对定位 4.Fixed固定定位 2.1 静态定位 static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 2.1 静态定位 没有设置position属性时的状态 2.2 相对定位 relative：称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。 相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 1)一个子块的情况 #block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative; /* relative相对定位 */ left:30px; top:30px; } 一个div设置为相对定定位后的效果 以右侧和下侧为基准设置相对定定位 2)两个子块的情况 设置为相对定位前的效果 两个兄弟div的情况下， 其中一个设置为相对定位后的效果 3．结论 得出下面两条关于“相对定位”的定位原则。 （1）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。 （2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。 两个兄弟div都设置为相对定位后的效果 在浮动方式下，使用相对定位 2.3 绝对定位 介绍了相对定位以后，下面介绍绝对定位（absolute）。 通过上述讲解，可以了解到各种position属性都需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。 absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。 绝对定位的盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 设置绝对定位前的效果 1．创建基础页面 将中间的div设置为绝对定位后的效果 2．使用绝对定位 设置偏移量后的效果 将父块设置为“包含块”后的效果 对于绝对定位的正确描述如下： 1）使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。 2）绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 3）绝对定位的特殊性质 如果设置了绝对定位，而没有设置偏移属性，那么它仍保持在原来的位置，这个性质可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位子的情况。 2.4固定定位 fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。 目前还没有被IE6支持，因此不做介绍 如果网站能够确保在IE6/7和firefox中显示正常，则可以保证99.13%的访问者正常浏览网页。 3.Z-index空间位置 Z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于其值小的上方。 4.盒子的display属性 Display 对于盒子的一个专门属性， 用以确定盒子的类型 inline block none 小结 本章的重点和难点是深刻地理解“浮动”和“定位”这两个重要的性质，它们对于复杂页面的排版至关重要。 习题 1.简述“标准流”的含义，以及div元素在标准流中是如何定位的。 2.分别简述“静态定位”、“相对定位”、“绝对定位”和“固定定位”的原理和规则。 “盒子”与“模型”的概念探究 1 长度单位 2 边框 3 设置内边距 4 前课复习：CSS盒子模型 设置外边距 5 盒子之间的关系 6 盒子在标准流中的定位原则 7 盒子的浮动与定位 新课内容： 盒子的浮动 1 盒子的定位 2 上一章