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