盒子的浮动与定位案例.pptVIP

  • 78
  • 0
  • 约3.55千字
  • 约 25页
  • 2016-11-24 发布于湖北
  • 举报
第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将

文档评论(0)

1亿VIP精品文档

相关文档