梦幻屋

梦幻屋 > 学院 >CSS > 正 文
软件搜索:

彻底弄懂CSS盒子模式之三

更新时间: 2007-4-5 7:59:00 来源: 本站收集  作者: 佚名 Add to ToLib.com...
  •   彻底弄懂CSS盒子模式之三......

6.如果父盒子不设定高度或者高度为自动,而其子盒子设定了浮动,并且高度超过了父盒子,在标准浏览器中,父盒子高度是不能自适高度,但是这种高度自适应常是我们需要的,如何做到让高度自适应呢,常见的办法是在父级内,浮动子盒子后边加入以下代码:<div style="clear:both"></div>清除掉那个小盒子的浮动。请自行把代码中我注释部分消除注释再看效果,现在是没有自适应的情况,请用标准浏览器FF预览和测试代码效果:

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

7.下面这个例子很重要,可以说明浮动元素的很多特性,大家运行代码框后再手动调整浏览器窗口大小,看版面有什么变化,下面我给你解释常见的问题和技巧。

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(1)在一个盒子内的浮动对像左右浮动时,它的左右边界不一定就会靠在父对象的内补白上或边框上,上面9个盒子都是左浮动的,但在窗口最大化的情况下,只有第一个盒子和最后一个盒子的左边界靠在父盒子左边内侧。
(2)浮动对象之间不会重叠。上面有讲到浮动对像越出外边去的情况,那么一个浮动盒子又会不会越到另一个浮动对象上面去呢,实质上它们是不会重叠的,即使用了负边界看起来像重叠在一起。
(3)并排的同一浮动方向的对像在一行中放不下时,可以自动换行。大家在浏览下面代码时,改变一下浏览器窗口,就会看到我所说的情况。
(4)浮动盒子在本文流中出现的位置会影响它的水平浮动位置,就像下面运行框效果,那些盒子并不是紧跟着一起出现的,之间有文本存在,所以结果造成所有等高的盒子并不是同一直线排列出现,而变成有一定的梯度。如果两个盒子之间文本流区块高度大于前边浮动元素高度时,紧接着的同一浮动方向的对象将会被自动换行显示。在下面实例中,如果调整浏览器窗口尽量小时,所有盒子可能会出现全部靠在父盒子左边的情况,因为缩小浏览器同时,盒子右边的文本流高度随之增高。

可见不要小看我浮动,熟练掌握我将会给你排版带来很多意想不到效果哦。

8.再讲一则注意事项,在开始时我不是有说过要给浮动对象设定一个宽度的,不然会有意想不到结果,即没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。请大家自行修改下面代码我注释前边的宽(只能删其中一个),测试看看效果就知道怎么回事了。

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

二、下面我要请我的好伙伴clear出场给你们讲讲它的故事,有请。
大家好,我是clear,能见到如此多人捧场我感到无比的荣幸,虽然在各位网页设计工作中我的作用常常被忽略,但我也有些作用是没有人能替代的,下面我将讲几项我实用作用以激发大家对我的兴趣:
1.如果你想一段文本流两边可以出现浮动对像的话,你可以用clear:none,看下面效果,蓝色背景段落两边的盒子是浮动的哦。

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

2.如果你要为一个网页准备一个页脚区块,比如<div id=”footer”></div>,你在设计网页的时候,你想不管你前边怎么浮动排版而又不想这个页脚跟上去,让它一直保持在前边内容后边,而且还是换行独立显示的,那么给这个页脚区块样式加个clear:both吧。
3.我还可以快速清除网页中具有浮动属性的不同对像的浮动,如果有很多的话,我的作用更能发挥出来,当然你也可以一条一条样式去删掉浮动的样式,但我肯定这样没有我来的方便,下面效果中,没有清除浮动前是横排的,但是清除后变成纵排(举此例只为说明问题,不管这实例实不实用),请自己删掉我的注释部分进行前后对比。

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

好了,我的介绍到此完毕,各位还满意吗?有什么不满意可以提出来哦。你的意见就像一面镜子,它可以让我很清楚地发现自己的不足,然后改进它。

上一页  [1] [2] 

梦幻屋
  • 上一篇文章:

  • 此栏目下没有文章
  • 热点推荐

    女性推荐
    排行榜

    梦幻屋学院
    设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告 |  
    Copyright© 2005-2006 梦幻工作室版权所有. All rights reserved.
    经营许可证编号:蜀ICP备07002423