盒子的浮动与定位

1、第第14章章 盒子的浮动与定位盒子的浮动与定位盒子的浮动盒子的浮动o 在标准流中，一个块级元素在水平方向会自动伸展，直在标准流中，一个块级元素在水平方向会自动伸展，直到包含他的元素的边界；而在竖直方向和兄弟元素依次到包含他的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。排列，不能并排。o CSS中有一个中有一个float属性，默认为属性，默认为none，也就是标准流通，也就是标准流通常的情况。常的情况。o 如果将如果将float设置为设置为left或者或者right，元素就会向其父元素的，元素就会向其父元素的左侧或者右侧靠紧，同时默认的情况下，盒子的宽度不左侧或者右侧靠紧，同时默认的情

2、况下，盒子的宽度不再是伸展，而是收缩，根据盒子里边内容的宽度来确定。再是伸展，而是收缩，根据盒子里边内容的宽度来确定。准备页面准备页面 14-01.htm父div子div子div子div子po 未设置浮动，完全按标准流显示未设置浮动，完全按标准流显示设置第设置第1个浮动的个浮动的div .son1 float:left;o box-2左边框与左边框与box-1左边框重合，因为左边框重合，因为box-1已经脱离标准流，标准流中的已经脱离标准流，标准流中的box-2会顶到会顶到box-1的位置，而文字会环绕的位置，而文字会环绕box-1排列排列设置第设置第2个浮动的个浮动的div 14-03.ht

3、mo 将将 box-2 的的float属性也设置为属性也设置为left。o box-3的左边框仍然在的左边框仍然在box-1的左边框下边。的左边框下边。o box-1与与box-2均脱离标准流，它们之间的间隙由二者均脱离标准流，它们之间的间隙由二者margin构成。构成。设置第设置第3个浮动个浮动div 14-04.htmo 将将box-3的的float也设置为也设置为left。改变浮动方向改变浮动方向 14-05.htmo 将将box-3的的float设置为设置为righto 如果将浏览器调整变窄，如果将浏览器调整变窄，box-3将会被挤到下一行中，但将会被挤到下一行中，但仍然保持向右浮动。

4、仍然保持向右浮动。调整浮动对象调整浮动对象 14-06.htmo box-1保持向左，保持向左，box-3左浮动，左浮动，box-2右浮动。右浮动。o 将来浏览器窗口变窄，将来浏览器窗口变窄，box-3先被挤入下一行，这是按照先被挤入下一行，这是按照HTML书写顺序来决定的。书写顺序来决定的。浮动窗口挤入下一行位置浮动窗口挤入下一行位置 修改修改14-04.htmo 将将3个个div均设为左浮动，均设为左浮动，box-1比比box-2略高。略高。o 调整浏览器变窄，调整浏览器变窄，box-3将压入下一行，但会卡在将压入下一行，但会卡在box-1与与box-2的高差处。的高差处。使用使用clea

5、r清除浮动影响清除浮动影响 14-07.htm o 为为p元素增加左清除元素增加左清除 clear:left;，即这个段落左侧不再围，即这个段落左侧不再围绕着浮动框排列，但仍然受绕着浮动框排列，但仍然受box-3影响。影响。使用使用clear清除浮动影响清除浮动影响 14-07.htm o 如需脱离右方浮动窗口影响，设置如需脱离右方浮动窗口影响，设置clear:right;，因为右，因为右方方box-3较高，脱离了其影响，自然也脱离了较高，脱离了其影响，自然也脱离了box-1和和box-2影响。影响。o clear属性也可设置为属性也可设置为 both，同时清楚左右影响。，同时清楚左右影响。o

6、 clear属性要放到文字所在的盒子里。不是放在浮动的盒属性要放到文字所在的盒子里。不是放在浮动的盒子里的。子里的。扩展盒子高度扩展盒子高度o box-1、2、3均浮动，父均浮动，父div中无文字段落，父中无文字段落，父div范围缩范围缩为一条。为一条。 14-08a.htmo 一个一个div的范围是由它里边的标准流内容决定的，与里边的范围是由它里边的标准流内容决定的，与里边的浮动内容无关。的浮动内容无关。o 要让父要让父div包含包含3个浮动盒子，可以在个浮动盒子，可以在3个浮动个浮动div后增加后增加一个一个div实现。实现。 14-08.htm.father .clearmargin:0

7、;padding:0;border:0;clear:both;内部容器水平居中内部容器水平居中o 设置外部容器设置外部容器 text-align:centern会影响子级容器排列会影响子级容器排列n不同浏览器支持不同不同浏览器支持不同o 设置自身容器设置自身容器 margin:0 auto 123 文本在文本在DIV中垂直居中中垂直居中 vertical-align:middle;line-height:200px;o vertical-align:middle;表示行内垂直居中，我们将行距增表示行内垂直居中，我们将行距增加到和整个加到和整个DIV一样高一样高line-height:200px

8、;然后插入文字，然后插入文字，就垂直居中了。就垂直居中了。o Div在上级在上级 容器中居中容器中居中盒子的盒子的 postiono static：这是默认的属性值，也就是该盒子按照标准流（包：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。括浮动方式）进行布局。o relative：相对定位，使用相对定位的盒子以标准流方式进：相对定位，使用相对定位的盒子以标准流方式进行排版，然后使盒子相对于原位置偏移指定的距离。相对行排版，然后使盒子相对于原位置偏移指定的距离。相对定位的盒子仍在标准流中，占用其原有位置。定位的盒子仍在标准流中，占用其原有位置。o absolute：绝对定位

9、，盒子的位置以他的包含框为基准进行：绝对定位，盒子的位置以他的包含框为基准进行偏移。该盒子从标准流中脱离，其他盒子就好象这个盒子偏移。该盒子从标准流中脱离，其他盒子就好象这个盒子不存在一样。不存在一样。o fixed：固定定位，和绝对定位类似，只是以浏览器窗口为：固定定位，和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口滚动条时，依然基准进行定位，也就是当拖动浏览器窗口滚动条时，依然保持对象位置不变。保持对象位置不变。静态定位静态定位static 默认值默认值o 14-09.htm相对定位相对定位 relative o 使用相对定位，除了将使用相对定位，除了将positi

10、on属性设置为属性设置为relative，还需，还需要指定一定的偏移量。要指定一定的偏移量。o 例一：一个子块的情况例一：一个子块的情况 14-10.htm#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相对定位 */left:30px;top:30px;o 两个子块的情况两个子块的情况 14-11.htmo 设置设置box-1o 同时设置同时设置box-1，box-214-12.htm#block1position:relative;bott

11、om:30px;right:30px;相对定位规律相对定位规律o 使用相对定位的盒子，会相对于它在原本的位置，通过使用相对定位的盒子，会相对于它在原本的位置，通过偏移的指定的距离，到达新的位置。偏移的指定的距离，到达新的位置。o 使用相对定位的盒子仍在标准流中，它对父块和兄弟盒使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子是没有影响的。子是没有影响的。o 相对定位针对浮动的盒子是一样的规律。相对定位针对浮动的盒子是一样的规律。绝对定位绝对定位 absoluteo 各种各种positon属性都需要配合偏移量来实现定位，核心就属性都需要配合偏移量来实现定位，核心就是偏移基准。是偏移基准。o 相

12、对定位是以盒子本身在标准流或者浮动时的原本位置相对定位是以盒子本身在标准流或者浮动时的原本位置做为偏移基准。做为偏移基准。o 准备页面：准备页面：14-13.htmo 对对box-2使用绝对定位使用绝对定位 14-14.htmo box-2偏移以浏览器窗口为基准，该偏移以浏览器窗口为基准，该div脱离标准流，脱离标准流，box-3会上移。会上移。o 设置一定的偏移量。设置一定的偏移量。#block2position:absolute;top:0px;right:0px;#block2position:absolute;top:30px;right:30px;o 绝对定位并不是一定以浏览器（页面

13、）窗口为基准。绝对定位并不是一定以浏览器（页面）窗口为基准。o 为父为父div增加一个定位样式。增加一个定位样式。#fatherbackground-color:#a0c8ff;border:1px dashed #000000;padding:15px;position:relative;#block2position:absolute;top:0px;right:0px;绝对定位规则绝对定位规则o 使用绝对定位的盒子以它使用绝对定位的盒子以它“最近最近”的一个的一个“已经定位已经定位”的的“祖祖先元素先元素”为基准进行偏移，如果没有，则以浏览器（页面）为基准进行偏移，如果没有，则以浏览器（页面）为基准。为基准。o 绝对定位的盒子脱离标准流，后面兄弟盒子定位的时候，绝对定位的盒子脱离标准流，后面兄弟盒子定位的时候，就好象这个盒子不存在一样。就好象这个盒子不存在一样。固定定位：固定定位：fixedo 与绝对定位类似。与绝对定位类似。o 区别在于定位基准不是祖先元素，而是浏览器窗口。区别在于定位基准不是祖先元素，而是浏览器窗口。o 当页面移动时，固定定位窗口当页面移动时，固定定位窗口 相对与浏览器窗口位置不变。相对与浏览器窗口位置不变。#block2position:absol