第5章盒子的浮动与定位

《第5章盒子的浮动与定位》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS网页设计标准教程第1部分CSS核心原理第5章盒子的浮动与定位盒子的浮动5.1盒子的定位5.2第4章介绍了独立的盒子模型，以及在标准流情况下的盒子的相互关系。如果仅仅按照标准流的方式进行排版，就只能按照仅有的几种可能性进行排版，限制太大。CSS的制定者也想到了排版限制的问题，因此又给出了若干不同的手段以实现各种排版需要，从而可以灵活地实现各种形式的排版要求。本章介绍CSS中float和position这两个重要属性的应用。5.1盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟

2、元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。5.1.1制作基础页面浮动的性质比较复杂，这里先制作一个基础的页面，代码如下，文件为“05-01.html”。后面讲解将基于这个文件进行。5.1.2设置第1个浮动的div在上面的代码中找到：.son1{/*这里设置son1的浮

3、动方式*/}将.son1盒子设置为向左浮动，代码为：.son1{/*这里设置son1的浮动方式*/float:left;}图5.2设置第1个div浮动时的效果5.1.3设置第2个浮动的div图5.3设置前两个div浮动时的效果5.1.4设置第3个浮动的div图5.4设置第3个div浮动时的效果5.1.5改变浮动的方向图5.5改变浮动方向后的效果图5.6div被挤到下一行时的效果5.1.6再次改变浮动的方向图5.7交换div位置时的效果图5.8div被挤到下一行的效果5.1.7全部向左浮动图5.9设置3个div浮动时的效果图5.1

4、0div挤倒下一行被卡住时的效果5.1.8使用clear属性清除浮动的影响图5.11设置浮动后文字环绕的效果图5.12清除浮动对左侧影响后的效果图5.13清除浮动对右侧影响后的效果5.1.9扩展盒子的高度图5.14包含浮动div的容器将不会适应高度图5.15希望实现的效果5.2盒子的定位广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。狭义的“定位”：在CSS中有一个非常重要的属性position

5、，这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。首先，对position属性的使用方法做一个概述，后面再具体举例子说明。position属性可以设置为以下4个属性值之一。（1）static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。（2）relative：称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（3）abs

6、olute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。（4）fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。5.2.1静态定位图5.16没有设置position属性时的状态5.2.2相对定位1．一个子块的情况图5.17一个div设置为相对定定位后的效果图5.18以右侧和下侧为基准设置相对定定位2．两个子块的情况图5.19设置为相对定

7、位前的效果图5.20两个兄弟div的情况下，其中一个设置为相对定位后的效果3．结论得出下面两条关于“相对定位”的定位原则。（1）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。（2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。图5.21两个兄弟div都设置为相对定位后的效果图5.22在浮动方式下，使用相对定位5.2.3绝对定位介绍了相对定位以后，下面介绍绝对定位（absolute）。通过上述讲解，可以了解到各种position属性都需要通过配合偏移一定的距离来实现定位，而其中核心

8、的问题就是以什么作为偏移的基准。1．创建基础页面2．使用绝对定位3．浏览器的Bug与Hack图5.23设置绝对定位前的效果图5.24将中间的div设置为绝对定位后的效果图5.25设置偏移量后的效果图5.26将父块设置为“包含块”后的效果