第12课 CSS浮动与定位

图14.21 两个兄弟div都设置为相对定位后的效果
图14.22 在浮动方式下，使用相对定位
14.2.3
绝对定位
介绍了相对定位以后，下面介绍绝对定位（ absolute）。通过上述讲解，可以了解到各种 position属性都需要通过配合偏移一定的距离来 实现定位，而其中核心的问题就是以什么作为偏 移的基准。 1．创建基础页面 2．使用绝对定位 3．浏览器的Bug与Hack
（3）absolute：绝对定位，盒子的位置以它 的包含框为基准进行偏移。 绝对定位的盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位没有影 响，其他的盒子就好像这个盒子不存在一样。
（4）fixed：称为固定定位，它和绝对定位类
似，只是以浏览器窗口为基准进行定位，也就是 当拖动浏览器窗口的滚动条时，依然保持对象位 置不变。
实例p214.html
46
14. 3 z-index空间位置
• 仅在定位元素上奏效。也就是只有设置了
position的值为absolute或者relative或者fixed
的时候才有效。
• 只能对同级元素有效。
14. 4盒子的display属性
实例p215-1.html 、p215-2.html
元素的例子。
inline元素
inline元素的特点是：
•和其他元素都在一行上
•高，行高及顶和底边距不可改变；
•宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>,
<strong> 和<em>是inline元素的例子
列表项元素display: list-item
图14.20 两个兄弟div的情况下， 其中一个设置为相对定位后的效果
3．结论
得出下面两条关于“相对定位”的定位原则。 （1）使用相对定位的盒子，会相对于它在原本的 位置，通过偏移指定的距离，到达新的位置。 （2）使用相对定位的盒子仍在标准流中，它对父 块和兄弟盒子没有任何影响。
实例14-12.htm
48
行内元素的盒子
• 行内元素的盒子永远只能在浏览器中得到一行高度的空 间（行高由line-height属性决定，如果没设置该属性
，则是内容的默认高度），如果给它设置上下border，
margin，padding等值，导致其盒子的高度超过行高，
那么它的盒子上下部分将和其他元素的盒子重叠。
• 因此，不推荐对行内元素直接设置盒子属性，一般先设
14.2.1
静态定位
实例14-09.htm
图14.16 没有设置position属性时的状态
14.2.2
相对定位
实例14-10.htm
1．一个子块的情况
图14.17 一个div设置为相对定定位后的效果
图14.18 以右侧和下侧为基准设置相对定定位
2．两个子块的情况
实例14-11.htm
图14.19 设置为相对定位前的效果
第12课 CSS浮动与定位
上一课介绍了独立的盒子模型，以及在标准流情况 下的盒子的相互关系。如果仅仅按照标准流的方式进 行排版，就只能按照仅有的几种可能性进行排版，限 制太大。 CSS的制定者也想到了排版限制的问题，因此又给 出了若干不同的手段以实现各种排版需要，从而可以 灵活地实现各种形式的排版要求。
向和兄弟元素依次排列，不能并排。
使用“浮动”方式后，块级元素的表现就会
有所不同。
盒子浮动的规则
基本语法：
float: none/left/right
float属性默认为none，也就是标准流通常
的情况。如果将float属性的值设置为left或
right，元素就会向其父元素的左侧或右侧靠紧，
同时默认情况下，盒子的宽度不再伸展，而是收
• z-index是设置对象的层叠顺序的样式。该样式只对 position属性为relative或absolute的对象有效。这 里的层叠顺序也可以说是对象的“上下顺序”。 • 基本语法： z-index: auto, 数字 • 语法说明： auto遵从其父对象的定位，数字必须是无单位 的整数值，可以取负值。z-index值较大的元素将 叠加在z-index值较小的元素之上。对于未指定此 属性的定位对象，z-index值为正数的对象会在其 之上，而z-index值为负数的对象在其之下。
• 在html中只有li元素默认是此类型，将元素设置
为列表项元素后将按列表元素显示，再通过设置 列表选项可使元素的左边出现小黑点。
隐藏元素display: none
• 当某个元素被设置成了隐藏元素之后，浏览器会 完全忽略掉这个元素，该元素将不会被显示，也 不会占据文档中的位置。像title元素默认就是此 类型。 • 比较visibility: hidden; • 制作下拉菜单、tab面板等有时就需要用display: none把菜单或面板隐藏起来
绝对定位的特殊性
例p213.html
如果设置了绝对定位，而没有设置偏移属性，
那么它将仍保持在原来的位置。
14.2.4 固定定位（fixed）
生成绝对定位的元素，相对于浏览器窗口进 行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
14. 3 z-index空间位置
是以块级元素显示，或不显示 • display:block | inline | none | list-item
block元素
block元素的特点是： 1.总是在新行上开始； 2.高度，行高以及顶和底边距都可控制； 3.宽度缺省是它的容器的100%，除非用width设定一
个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块
需要使用display属性切换的情况
1. 让一个inline元素从新行开始； 2. 让块元素和其他元素保持在一行上； 3. 控制inline元素的宽度; 4. 控制inline元素的高度（对导航条特别有用）； 5. 无须设定宽度即可为一个块元素设定与文字同宽 的背景色
Display属性的应用－制作竖直导航菜单
实例14-13.htm
图14.23 设置绝对定位前的效果
图14.24 将中间的div设置为绝对定位后的效果
实例14-14.htm
图14.25 设置偏移量后的效果
图14.26 将父块设置为“包含块”后的效果
结论
得出下面两条关于“绝对定位”的定位原则。 （1）使用绝对定位的盒子，以它最近的一个已经 定位的祖先元素为基准进行偏移。如果没有祖先 元素，那么会以浏览器窗口为基准进行定位。 （2）绝对定位的框从标准流中脱离，这意味着它 们对其后的兄弟盒子的定位没有影响，其他盒子 就好像这个盒子不存在一样。
#nav a { font-size: 14px; color: #333333; text-decoration: none; background-color: #CCCCCC; display: block; width:140px; padding: 6px 10px 4px; border: 1px solid #000000; margin: 2px; } #nav a:hover { color: #FFFFFF; background-color: #666666; }
14.1.2
设置第1个浮动的div
在上面的代码中找到： .son1{ /* 这里设置son1的浮动方式*/ } 将.son1盒子设置为向左浮动，代码为： .son1{ /* 这里设置son1的浮动方式*/ float:left; }
实例14-02.htm
图14.2 设置第1个div浮动时的效果
14.1.3
14.1.6
实例14-06.htm
再次改变浮动的方向
图14.7 交换div位置时的效果
图14.8 div被挤到下一行的效果
14.1.7
实例14-0602.htm
全部向左浮动
图14.9 设置3个div浮动时的效果
图14.10 div挤倒下一行被卡住时的效果
14.1.8
使用clear属性清除浮动的影响
浮动的应用举例
• 1 图文混排及首字下沉效果等
浮动的应用举例
• 2 菜单的竖横转换 • 3 制作栏目框标题栏
• 标题栏的左端是栏目标题，右端是“更多”之类的链接 。如何将文字分别放在一个盒子的左右两端呢？
|| 栏目标题1 more 最简单的办法就是设置左边的文字左浮动，右边的文字 右浮动。这时由于两个盒子都浮动，不占据外围容器的 空间，所以必须设置外围盒子h3的高度，使它在视觉上 能包含住两个浮动的盒子
置行内元素以块级元素显示，再设置它的盒子属性。
改变行内元素的高度
• 如图所示，当增加行内元素的边界和填充时，行内 元素a占据浏览器的高度并没有增加，下面这个div 块仍然在原来的位置，导致行内元素盒子的上下部 分重叠，而左右部分不会受影响。
display属性
• 通过display属性可控制元素是以行内元素显示还
图14.15 希望实现的效果
14.2 盒子的定位
广义的“定位”：要将某个元素放到某个位
置的时候，这个动作可以称为定位操作，可以使 用任何CSS规则来实现，这就是泛指的一个网页排 版中的定位操作，使用传统的表格排版时，同样 存在定位的问题。
狭义的“定位”：在CSS中有一个非常重要的
属性position，这个单词翻译为中文也是定位的 意思。 然而要使用CSS进行定位操作并不仅仅通过这 个属性来实现，因此不要把二者混淆。
本章介绍CSS中float和position这两个重要属性 的应用。
第 14 章 盒子的浮动与定位
第14章 盒子的浮动与定位
14.1 盒子的浮动
14Hale Waihona Puke Baidu2
盒子的定位
14.3
z-index空间位置
14.4
盒子的display属性
14.1 盒子的浮动
在标准流中，一个块级元素在水平方向会自
动伸展，直到包含它的元素的边界；而在竖直方
首先，对position属性的使用方法做一个概
述，后面再具体举例子说明。 position属性可以设置为以下4个属性值之 一。
（1）static：这是默认的属性值，也就是该
盒子按照标准流（包括浮动方式）进行布局。
（2）relative：称为相对定位，使用相对定 位的盒子的位置常以标准流的排版方式为基础， 然后使盒子相对于它在原本的标准位置偏移指定 的距离。 相对定位的盒子仍在标准流中，它后面的盒 子仍以标准流方式对待它。
缩，根据盒子里面的内容的宽度来确定。
盒子浮动的规则
浮动元素的外边缘不会超过父元素的内边缘 浮动元素会脱离标准流，未设置浮动的元素会顶 替浮动元素的位置 浮动元素不会互相重叠,未设置浮动的元素中的文 字会环绕设置了浮动元素的周围 浮动元素不会上下浮动
14.1.1
制作基础页面
浮动的性质比较复杂，这里先制作一 个基础的页面，代码如下，文件为“1401.html”。 后面讲解将基于这个文件进行。
在未浮动的文字 盒子（如p标签） 的样式中添加： clear:left/right/ both;
实例14-07.htm
图14.11 设置浮动后文字环绕的效果
图14.12 清除浮动对左侧影响后的效果
图14.13 清除浮动对右侧影响后的效果
14.1.9
实例14-08.htm
扩展盒子的高度
图14.14 包含浮动div的容器将不会适应高度
实例14-03.htm
设置第2个浮动的div
图14.3 设置前两个div浮动时的效果
14.1.4
实例14-04.htm
设置第3个浮动的div
图14.4 设置第3个div浮动时的效果
14.1.5
实例14-05.htm
改变浮动的方向
图14.5 改变浮动方向后的效果
图14.6 div被挤到下一行时的效果
•