第4课 浮动与定位(下)
上节课讲解了浮动的作用,这节课中介绍另一个CSS布局的重要手段——“定位”。
本节课时长18分6秒,下载文件25.7兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() 了解详细说明 |
上节课讲解了浮动的作用,这节课中介绍另一个CSS布局的重要手段——“定位”。
本节课时长18分6秒,下载文件25.7兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
这篇文章发表于 2007年11月26日 星期一 7:00 am,并被分类于深入CSS盒子模型。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论,或者在您自己的网站中引用 (Trackback) 它。
前沿视频教室的内容版权属于北京前沿科技,http://www.artech.cn。Copyright 2006-2011
本网站使用了 WordPress
2.2
中文版 。












[…] 第 3课 深入理解盒子模型(下) 第4课 浮动与定位(上) 第4课 浮动与定位(下) 第5课 文字与图像(上) 第5课 […]
温老师,您好,我现在在看您的这本《css设计彻底研究》这本书,我觉得写得真好。能够针对我们不懂的那些地方,一针见血。就是我不知道怎么练习,学了之后我想实践实践,您觉得怎么实践比较好一点呢?
[…] 第 3课 深入理解盒子模型(下) 第4课 浮动与定位(上) 第4课 浮动与定位(下) 第5课 文字与图像(上) 第5课 […]
老师好,请教一个问题。
这课里讲到absolute定位时,把父div的position属性设为relative之后,再把子div的top和right都设为0就可以和父div的右上角完全贴合了。我试了一下把right:0改成left:0之后,顶端依然和父div齐平,但左侧却和父div的左侧留出了相当于父div的padding值的距离,这是为什么呢?
堕落的球球,
你把你的代码贴到我们的论坛上,我帮你看看吧,按说不应该如此:
http://talking.artech.cn/thread-178-1-1.html
老师好,我在学习绝对定位时,按你教程中的代码修改无误后,又进行了自行修改,修改如下:在#father {}中加入”position:relative;”后,同时在#father div {}中也加入了position:relative;”。这时BOX-2是以自身标准流状态为基准进行偏移的。 这个我想分析了好久,不知道原因。以下是我的分析,但有矛盾。搞不清楚此时的BOX-2是绝对定位,还是相对定位。
分析:
1.BOX-2是处于绝对定位状态: BOX-2应该以#father 这个盒子为基准进行偏移,因为这是BOX-2的祖先盒子,而BOX-1和BOX-3是BOX-2的兄弟盒子,但这与结果不一致。
2.BOX-2是处于相对定位状态: 所以BOX-2自己的标准流状态偏移, 这虽然与结果一致,但在CSS的层叠特性中说过:样式的优先级是:ID样式>标记样式; 在代码里BOX-2的ID样式是绝对对位,而标记样式是相对对位,此时BOX-2应该是绝对定位,但这点与结果也相矛盾。
请你指出我逻辑上的漏洞,谢谢!
另外还有个问题:绝对定位中选择的包含框为基准,是指仅指祖先盒子吗?是否包括兄弟盒子?
hx7520,
抱歉,你的第一个问题我还没有看明白。这样,你把你的完整代码发到我们的论坛上:
http://talking.artech.cn ,再仔细说一下,我给你看看。
第二个问题是只看祖先,不管兄弟的。
老师在第4课 浮动与定位(下)教程中我看到您定义的样式#father和#father div,这两个选择器表示的是什么意思啊,让我一直很困惑!能给我讲解一下吗?有劳老师啦!
kitty,
#father 的含义是,选中 id为 father 的元素; #father div 的含意思是 选中 id为 father 的元素 的后代中的div元素。
仔细看一下关于选择器的概念,就能搞明白了,这是很重要的基础。
老师啊,为什么第4课 浮动与定位(下)播放了到一分多钟的时候就不能播放了啊。
kitty,
我试了一下,似乎没有问题。您可以再试一次看看,如果还有问题,再给我们留言,我在具体查一查。谢谢!
支持支持
谢谢支持!
温老师关于绝对定位的讲解,解决了以前一直困扰我的问题…哈哈
不过还是有错误要指出下,就是关于PPT的标题.是盒子的浮动和定位(下),非(上) :P
jindongxu794,你好!
您说得对,等我们有时间修改一下,重新渲染和生成视频要花不少时间,等一等吧!谢谢您!
坐前排~~~认真听课!(虽然现在是上班时间,但都迫不及待来看看!)
ivy,你好!
坚持就是胜利,CSS并不难学,坚持 钻研就一定可以搞定它。
谢谢温老师的鼓励!!