CSS页面布局设计

《CSS页面布局设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页制作综合技术教程第4部分CSS页面布局设计第14章盒子的浮动与定位盒子的浮动14.1盒子的定位14.214.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.6div被挤到下一行时的效果14.1.6实验5——再次改变浮动的方向图14.7交换di

2、v位置时的效果图14.8div被挤到下一行的效果14.1.7实验6——全部向左浮动图14.9设置3个div浮动时的效果图14.10div挤倒下一行被卡住时的效果14.1.8实验7——使用clear属性清除浮动的影响图14.11设置浮动后文字环绕的效果图14.12清除浮动对左侧影响后的效果图14.13清除浮动对右侧影响后的效果14.1.9实验8——扩展盒子的高度图14.14包含浮动div的容器将不会适应高度图14.15希望实现的效果14.2盒子的定位（1）广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网

3、页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。（2）狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。●static：静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。●relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。●absolute：绝对定位，盒子的位置以它的包含框

4、为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。●fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。14.2.1静态定位14.2.2相对定位1．实验1——一个子块的情况图14.17一个div设置为相对定位后的效果图14.18以右侧和下侧为基准设置相对定位2．实验2——两个子块的情况图14.19设置为相对定位前的效果图14.20两个兄弟div之一设置为相对定位后的效果3．结论下面是两条关于“相对定位”的定位原则。（1）

5、使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。（2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。14.2.3绝对定位1．准备网页代码2．案例——使用绝对定位图14.23设置绝对定位前的效果图14.24将中间的div设置为绝对定位后的效果图14.25设置偏移量后的效果图14.26将父块设置为“包含块”后的效果对于绝对定位的正确描述如下。●使用绝对定位的盒子以它的“最近”一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。●绝对定位的框从标准流中脱离，这意味着它们对其后

6、的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。在上述的第一条原则中，有3个带引号的定语，需要进行一些解释。（1）关于“最近”，在一个节点的所有祖先节点中，找出所有“已经定位”的元素，其中距离该节点最近的一个节点，父亲比祖父近，祖父比曾祖父近，以此类推，“最近”的就是要找的定位基准。（2）所谓“已经定位”元素的含义是，position属性被设置，并且被设置为不是static的任意一种方式，那么该元素就被定义为“已经定位”的元素。（3）关于“祖先”元素，如果结合本章最前面介绍的“DOM树”的知识，就可以理解了。从任意节点开始，走到根节点，经过的所有节点都是它的祖

7、先，其中直接上级节点是它的父亲，以此类推。