盒子的浮动与定位讲述.ppt

第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个浮动的div 14-03.htm 将 box-2 的float属性也设置为left。 box-3的左边框仍然在box-1的左边框下边。 box-1与box-2均脱离标准流，它们之间的间隙由二者margin构成。 设置第3个浮动div 14-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:0 auto body style=text-align:center; div style=width: ; height: ; margin:0 auto; div 123/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