第4课 浮动与定位(上)
上节课介绍了盒子模型和标准流方式下的布局模式,大家可以体会到,仅在标准流方式下布局,局限性很大,实际上CSS还具有更强有力的方式。下面就来学习非常重要的两个性质“浮动”和“定位”。
本节课时长17分46秒,下载文件26兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() 了解详细说明 |
上节课介绍了盒子模型和标准流方式下的布局模式,大家可以体会到,仅在标准流方式下布局,局限性很大,实际上CSS还具有更强有力的方式。下面就来学习非常重要的两个性质“浮动”和“定位”。
本节课时长17分46秒,下载文件26兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
这篇文章发表于 2007年11月23日 星期五 7:00 am,并被分类于深入CSS盒子模型。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论,或者在您自己的网站中引用 (Trackback) 它。
前沿视频教室的内容版权属于北京前沿科技,http://www.artech.cn。Copyright 2006-2011
本网站使用了 WordPress
2.2
中文版 。













[…] 第 3课 深入理解盒子模型(上) 第 3课 深入理解盒子模型(下) 第4课 浮动与定位(上) 第4课 浮动与定位(下) 第5课 文字与图像(上) 第5课 […]
温老师,《CSS彻底研究》这本书中第76页提到的本书光盘中的“第4章1.htm”这个目前三个子块按标准流排列的例子,如果我设置子块.son2为向左浮动(即float: left;),那么在火狐浏览器上看到.son2这个子块脱离标准流后,还和原来它所在的水平位置往下移动了15px,没有和移上来的按标准流排列的.son3在同一水平位置上,不理解这种现象,这个怎么解释呢?恳求得到老师解惑!
还有,虽然在.son2子块中加上“display:inline;”消除了IE6浏览器中浮动后margin加倍的问题,但在IE6上看到脱离标准流后的.son2子块和p段落块之间还有5px的距离,而在火狐浏览器上看到脱离标准流后的.son2子块和p段落块之间是没有距离的,这两种浏览器上看到的差别又该怎么理解呢?恳求得到老师解惑!
keke,
第一个问题,我想是把son2设置为浮动以后,它的magin就不会和外面的margin合并了,所以就低了15px。
第二个问题,我不知道具体什么意思,你贴个图出来,我看看?
温老师,这里不能贴图,我只好在论坛中发了图了,看到论坛中的图后,恳请解惑,不胜谢意!
温老是,我按照您视频最后所说到的办法解决内部div浮动时,外部div不能自适应高度的问题,IE6下设置float:left; margin:10px; 发现浮动层周围没有了父层的背景色,FF下背景色正常。而设置float:right; margin:10px; 时,两浏览器都正常。
shadow,
我还没有理解你的意思,这样,你写的完整一些,发到我们的论坛上,参考:
http://talking.artech.cn/thread-178-1-1.html
老师 你好 请问你能把源代码给出来下载吗??由于您讲的比较快,有些东西不懂 希望有源码帮助学习 谢谢了
love_css,
谢谢您喜欢我们的教程,不过目前由于和出版社有合同约束,还无法提供源代码下载,如果可能的话,买一本书书学习吧?
老师您好,我有一个问题想请教关于浮动:为什么浏览窗口缩小后Box-1,Box-2,会跳出文字框,甚至father框?详情:http://hi.baidu.com/%C7%B9%C5%DA%B2%BF%C3%C5/blog/item/0e9d0b01a76948de267fb509.html
枪炮部门 ,
你用的是什么浏览器?我这里似乎看到没有发现跳出去的现象?
如果是关于浏览器的兼容性问题,参考:http://learning.artech.cn/20090703.selected-faq.html ,希望对你有所帮助。
为什么在线看不了了啊
leighton ,
我这里播放没有问题阿,您再试试看?
视频第八分钟左右那里,两个DIV都 float left 时这两个DIV左右的边距时相加不是叠加吧?
蒲公英,
相邻的float元素之间,无论是上下还是左右,都不会叠加(塌陷),只有标准流中,上下相邻的盒子之间才会塌陷。
谢谢温老师,让我受益匪浅,以前感觉页面排版是一个很困难的问题,学习了一段时间之后,感觉自己也有了一部分的理解了。
平凡,
是的,CSS并不难,只要把原理真正搞懂,在多多实践,很快就可以掌握的!
半月前发现了本站,真是个学习的好地方,不过好像我发现有点太晚了。
看到这上面提出问题的时间都在08年前,不知道以后有问题了,温老师还会不会回答。
温老师讲解的CSS真的很好,谢谢提供,祝老师天天开心。
娃娃,
我们一直都会回答读者问题的,请放心!
这东西很好,谢谢老师提供。
很高兴 ,
谢谢您的鼓励,欢迎常来这里交流!
温老师我把代码放在我的QQ空间里了你能帮我看下么 我的浮动那里有问题 这节课的.SON1 浮动后我的效果和你的不一样啊 谢谢你了
http://user.qzone.qq.com/497774728
就是我的。SON1 左浮动后 ,。SON2自动自动对齐。。SON1 但是。SON1的前面多出1条竖线,好象是。SON1的边框不能不能对齐到最左面。你把我的代码放到DW里,看一下就知道了,我不知道是什么原因。
我明白你的意思了。
我们放在书上的图是用Firefox浏览器显示的效果。你说的现象是在IE 6中的。
如果用IE 6 显示,就如您所说的那样,有问题,这是IE的一个著名Bug,成为“浮动双倍margin”,也就是当一个盒子浮动以后,他的左右margin会加倍,从而产生你看到的效果。
修正这个错误的方法是,在.son1的CSS设置中,加一条“display:inline”,效果就和Firefox中相同了,这个bug在IE 7中已经修正了。
谢谢温老师。
网盲,
你把问题描述清楚一些,具体哪里不一样了?
老是这节课的浮动我有问题 我BOX1向左浮动之后BOX2 上来后有两个边框 这上传不了图片 不方便说
无标题文档
body{
margin:15px;
font:”宋体”;
font-size:12px
}
……
温老师 帮我看一下是哪有问题了
网盲,
这样看不出问题,你把你做的网页挂到网上,然后把URL贴到这里,我给你看一下。
我新来的,大家好。
Uiu,
欢迎新朋友,常来交流吧!
温老师~~~晚上好!!我来上课了!
呵呵,ivy同学好!
希望你能学的又快又好!加油!
那好,我们开始点名