盒子的浮动与定位.

第14章盒子的浮动与定位盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，直到包含他的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float设置为left或者right，元素就会向其父元素的左侧或者右侧靠紧，同时默认的情况下，盒子的宽度不再是伸展，而是收缩，根据盒子里边内容的宽度来确定。准备页面14-01.htm父div子div子div子div子p未设置浮动，完全按标准流显示设置第1个浮动的div.son1{float:left;}box-2左边框与box-1左边框重合，因为box-1已经脱离标准流，标准流中的box-2会顶到box-1的位置，而文字会环绕box-1排列设置第2个浮动的div14-03.htm将box-2的float属性也设置为left。box-3的左边框仍然在box-1的左边框下边。box-1与box-2均脱离标准流，它们之间的间隙由二者margin构成。设置第3个浮动div14-04.htm将box-3的float也设置为left。改变浮动方向14-05.htm将box-3的float设置为right如果将浏览器调整变窄，box-3将会被挤到下一行中，但仍然保持向右浮动。调整浮动对象14-06.htmbox-1保持向左，box-3左浮动，box-2右浮动。将来浏览器窗口变窄，box-3先被挤入下一行，这是按照HTML书写顺序来决定的。浮动窗口挤入下一行位置修改14-04.htm将3个div均设为左浮动，box-1比box-2略高。调整浏览器变窄，box-3将压入下一行，但会卡在box-1与box-2的高差处。使用clear清除浮动影响14-07.htm为p元素增加左清除{clear:left;}，即这个段落左侧不再围绕着浮动框排列，但仍然受box-3影响。使用clear清除浮动影响14-07.htm如需脱离右方浮动窗口影响，设置{clear:right;}，因为右方box-3较高，脱离了其影响，自然也脱离了box-1和box-2影响。clear属性也可设置为both，同时清楚左右影响。clear属性要放到文字所在的盒子里。不是放在浮动的盒子里的。扩展盒子高度box-1、2、3均浮动，父div中无文字段落，父div范围缩为一条。14-08a.htm一个div的范围是由它里边的标准流内容决定的，与里边的浮动内容无关。要让父div包含3个浮动盒子，可以在3个浮动div后增加一个div实现。14-08.htm.father.clear{margin:0;padding:0;border:0;clear:both;}内部容器水平居中设置外部容器text-align:center会影响子级容器排列不同浏览器支持不同设置自身容器margin:0autobodystyle=text-align:center;divstyle=width:;height:;margin:0auto;div123/div/div/body文本在DIV中垂直居中vertical-align:middle;line-height:200px;vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。Div在上级容器中居中盒子的postionstatic：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。relative：相对定位，使用相对定位的盒子以标准流方式进行排版，然后使盒子相对于原位置偏移指定的距离。相对定位的盒子仍在标准流中，占用其原有位置。absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。该盒子从标准流中脱离，其他盒子就好象这个盒子不存在一样。fixed：固定定位，和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口滚动条时，依然保持对象位置不变。静态定位static默认值14-09.htm相对定位relative使用相对定位，除了将position属性设置为relative，还需要指定一定的偏移量。例一：一个子块的情况14-10.htm#block1{background-color:#fff0ac;border:1pxdashed#000000;padding:10px;position:relative;/*relative相对定位*/left:30px;top:30px;}两个子块的情况14-11.htm设置box-1同时设置box-1，box-214-12.htm#block1{position:relative;bottom:30px;right:30px;}相对定位规律使用相对定位的盒子，会相对于它在原本的位置，通过偏移的指定的距离，到达新的位置。使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子是没有影响的。相对定位针对浮动的盒子是一样的规律。绝对定位absolute各种positon属性都需要配合偏移量来实现定位，核心就是偏移基准。相对定位是以盒子本身在标准流或者浮动时的原本位置做为偏移基准。准备页面：14-13.htm对box-2使用绝对定位14-14.htmbox-2偏移以浏览器窗口为基准，该div脱离标准流，box-3会上移。设置一定的偏移量。#block2{position:absolute;top:0px;right:0px;}#block2{position:absolute;top:30px;right:30px;}绝对定位并不是一定以浏览器（页面）窗口为基准。为父div增加一个定位样式。#father{background-color:#a0c8ff;border:1pxdashed#000000;padding:15px;position:relative;}#block2{position:absolute;top:0px;right:0px;}绝对定位规则使用绝对定位的盒子以它“最近”的一个“已经定位”的“祖先元素”为基准进行偏移，如果没有，则以浏览器（页面）为基准。绝对定位的盒子脱离标准流，后面兄弟盒子定位的时候，就好象这个盒子不存在一样。固定定位：fixed与绝对定位类似。区别在于定位基准不是祖先元素，而是浏览器窗口。当页面移动时，固定定位窗口相对与浏览器窗口位置不变。#block2{position:absolute;top:0px;right:0px;}盒子的display属性盒子有两种类型，一种是div这样的块级元素，一种是span这样的行级元素。通过display可以人为的指定盒子的类型。inline:行内block:块级none:无bodydivstyle=display:inlineBox-1/divdivstyle=display:inlineBox-2/divdivstyle=display:inlineBox-3/divspanstyle=display:blockBox-4/spanspanstyle=display:blockBox-5/spanspanstyle=display:blockBox-6/spandivstyle=display:noneBox-7/divspanstyle=display:noneBox-8/span/body