中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
招聘求职
中国互联
艺魂宝库网
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 彻底弄懂CSS盒子模式之三

彻底弄懂CSS盒子模式之三 (1)

来源:中国设计秀    作者:webflash    点击:215     加入收藏

一、下面请看float的精彩表演,有请。
大家好,我是float,欢迎访问CSS家族,在CSS家族中,在当今CSS排版流行的年代,我可扮演着重要的角色哦。因为我的工作对网页设计人员很有用,就像之前align帮助你们定位网页元素一样重要,但是我的功能似乎比align强多了。接下来我将现场给你演示我的绝活,看细心点哦。当然也许我一下子不能把我所有的技巧给大家演示,因为有些技巧本人也许一下子记不起来了,那就请那些对我比较了解的人来帮我补充补充啰,比如版主等等啊。

先讲一下我主要的工作,我主要是帮助对像在网页中对齐的,一旦我发出float:left或float:right命令,被我浮动的对像就会向左或向右移动直到遇到边框( border) 、填充( padding) 、边界( margin )或者另一个块对象的边缘为止,当然也有一些看起来较特殊的情况,比如被我浮动的元素设置了一个负边界(margin)的时候。我还可以让文字流环绕在被我浮动的对像周围,这也是我的特色。另外要注意的一点是,最好给浮动对象设置一下宽度,不然会出现一些意想不到的麻烦。我主要浮动类型有两种,它们是float:left和float:right,当然我还有一个功能是float:none,不过float:none比较少用,这也是我的默认值,有时也是很有用的,我等一下会讲的。下面我开始表演了,我的舞台可以是IE(Internet Explorer),或者FF(Firefox),但是有些技巧我一定要在标准的舞台中,如FF中才能表出来做的,请注意看我的说明,不然你用IE是看不到效果的。

1.我不动声色(我的属性不设置的时候),即:float:none,或者样式中不写这一项时,网页中的元素将按照它们自身的出现方式排列,一般是靠边对齐,先出现的排在前边,下面运行框是DIV先出现,P后出现,所以P排在DIV后面,注意看DIV的右边还有很多空间,但是P的文字不会跟在它的右边去。看:


        

2.我向盒子发出float:left命令,此时盒子浮动到左边,虽然看起来我的位置与上面例子没有什么变化,但此时跟在我后面的文本可以环绕到浮动盒子的右边了,看下面:


        

3.我向盒子发出float:right命令,不难想象此时盒子浮动到右边,此时文本将会环绕到此盒子的左边,看下面:

哈哈,看我表演了几项是不是开始觉得有点烦了,那么简单无聊的,那下面就给你表演几项特别的,但愿你不是IE的崇拜者,因为下面效果你用IE是看不到效果的,请用像FF那样的标准浏览器来运行代码框或测试吧。


        

4.浮动对象有负边界的情况,这时浮动对象可能会漂浮到其所在父对象外边去,这有点像绝对定位的效果,但又与绝对定位不同,它还能影响它所在地方的文本流,请用标准浏览器FF看下面代码效果:


        

5.如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性,子盒子漂浮后不会影响到父盒子的宽度,子盒子超出父盒子的部分会越到父盒子外面,但越出父盒子外的部分不会引起外边文本流的移动,而会直接覆盖在外边文字上面的,请用标准浏览器FF看下面代码效果:


        

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


        
0
顶一下
[1] [2]
2007-08-09 00:20:00    出处:blueidea
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口