第3课 深入理解盒子模型(下)
上节课中我们对盒子的构成进行了分析,这节课的重点是研究在标准流中的盒子的布局方式。
本节课时长22分29秒,下载文件25.3兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
上节课中我们对盒子的构成进行了分析,这节课的重点是研究在标准流中的盒子的布局方式。
本节课时长22分29秒,下载文件25.3兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
以下为本课的讲义,供大家参考。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
这篇文章发表于 2007年11月22日 星期四 7:00 am,并被分类于深入CSS盒子模型。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论,或者在您自己的网站中引用 (Trackback) 它。
“学以致用”主机使用视频教程:
![]() |
![]() 了解详细说明 |
前沿视频教室的内容版权属于北京前沿科技,http://www.artech.cn。Copyright 2006-2010
本网站使用了 WordPress
2.2
中文版 和 Lasse Havelund制作的 Mesozoic 页面主题。












我爱看你就~
嵌套盒子间的margin:两盒子之间,父块高度进行指定为40px,可子块高度并没有指定,怎么就能知道子块的高度超过了父块的高度?
我现在也看到了书的73页几何题,我现在有个问题想请教老师,就是那个K的大小即LI的上下Padding加上文本高度,即34像素.行高是1.2倍的字体大小(12px).我现在想问那么横向的字距是不是也是14PX?共实我一直都搞不懂假记我对标题元素h3设置了宽度值,这个宽度值是确定了盒子的大小还是确定了里面所能容下文字内容的数目?
在网上看了好多DIV+CSS的教程,当时很明白过后还是一头雾水,直到发现前沿教室才感觉眼前一片明郎,于是在卓越亚马上就订了>和>.这书确实写得不错.
我换新域名了,换下新链接!
【刚才回复错了地方了,不好意思哦】请老师见谅。
这个盒子的像素是怎么计算的哦?代码里面有这样的描述:ul{padding:5px 5px 5px;} 和 li{margin:20px 20px 20px 20px;} .那么ul盒子和li盒子之间的空隙(空白部分)就应该是:25px; 但是我截图之后在ps里面数像素为什么会是 25px+4px=29px 呢?还有别的地方也是有相同的和理论不符合的地方,请问这个是怎么回事?具体应该是怎么算的?
书上几合题,是不是写错了!!K:li的上下magin加上文本高度即34像素
应该是:li的上下padding是20,加上文本高度14px,等于34像素。
峰峰 ,
是的,可以参见:http://learning.artech.cn/category/overview/book-errate 第14条。
想让老师给帮忙解决一个关于padding的问题,在对一个div设置padding时,比如说设置了padding:40px;时,这个外层的div的范围就会增加40px的宽度,我研究了很长时间没有找到答案,很是迷惑, 想让老师给解决一下,
magigzc ,
就是这样的,如果你希望外层宽度不变,里面的宽度变小,可以设置外层的宽度为固定值,里面的宽度设置为自动,或者不设置,即可。
抱歉没有及时回复,我们最近很忙,下半年我们会拿出更多时间增加新内容的,欢迎来交流!
谢谢
请问css中的几何题里边n=v=36.8对吗?
CSS菜鸟,
还有小数点?一个像素就是一个像素,没法再分了,所以不能有小数点阿
打错了应该是48.8
css中的几何题答案:
a=h=i=15px(或者body的margin加15px)
b=g=j=p=r=x=25px(ul的padding加里li的margin)
c=f=m=o=u=w=5px(li.withborder的border-width:5px;)
d=10px(li的padding:10px;)
e=???????(宽度随浏览器窗口是变化的啊??!!)
k=s=?????(是不是10px加字体的高度—而且宽度随浏览器窗口是变化的啊??!!)
l=t=20px(li之间取最大值margin:20px而且margin-top:20px;)
n=v=?????(是不是10px加两个字体的高度加字体上下行间间距—而且而且宽度随浏览器窗口是变化的啊??!!)
q=15px(ul的margin:15px;)
————————————————————————————————
不知对错!!望解答……谢谢
————————————————————————————————
还有个问题是:如果把ul的padding设置为0时,li相对于ul的上下margin没有了!只有将ul的padding有设置数据时才能显示出来?
这个盒子的像素是怎么计算的哦?代码里面有这样的描述:ul{padding:5px 5px 5px;} 和 li{margin:20px 20px 20px 20px;} .那么ul盒子和li盒子之间的空隙(空白部分)就应该是:25px; 但是我截图之后在ps里面数像素为什么会是 25px+4px=29px 呢?还有别的地方也是有相同的和理论不符合的地方,请问这个是怎么回事?具体应该是怎么算的?
CSS初学者,
基本上是这样,k的高度时34像素10 +10 + 12*1.2 =34。
哦!我看的视频,没设置body的margin ,li的padding写成padding:10px 10px 0;
字号12px—-那12*1.2是什么意思?字有外边距嘛?
我主要问下面那个问题,你没讲解呀???
———————————————————————————————-
如果把ul的padding设置为0时,li相对于ul的上下margin没有了!只有将ul的padding有设置数据时才能显示出来?
请参考:
http://learning.artech.cn/20080221.css-exploring-errta.html
中的第14点。
老师!昨天视频还看的好好的,怎么今天就看不了了???????
可乐 ,
是的,由于下载的流量太大了,服务器停了,现在我们设置了每个文件只能单线程下载,应该可以节省一些资源了,如果您以后遇到问题,请告诉我们,谢谢!
老师您好,就是最后那个几何题,我做了,可是有些糊涂,你能把答案告诉我一下么?我自己对照这就应该懂了
sturggle85,
这个一两句话说不清楚,抱歉~~~
“嵌套盒子间的margin:两盒子之间,父块高度没有进行指定,父块高度会自然形成,由容纳子块的最小限度显示。
两盒子之间,父块高度进行指定后,ie与firefox有明显的区别,ie还是会以能容纳子块最小限度显示;而在firefox中则以设定父块原尺寸显示。”
可是真正做下来,恰恰相反,没有指定高度的父块,在ie里面是容纳子快最小限度,而在firefox里面还是不包裹子块显示,请问怎么做才能使两个浏览器都能将父块以最合适的尺寸显示子块
自由kj,
这句话的意思是: IE会根据内部子盒子大小决定父盒子的高度,而Firefox不会管里面内容的高度。这个是肯定的。
在实际中,通常并不会给父盒子设置高度,因为子盒子的高度都是变化的,我们并不知道真正显示时,外面的盒子多高。
如果不使用浮动,这个问题无所谓,如果使用了浮动,一般在外面的大盒子里的最下面,加一个空的div,把clear属性设置为both,把大盒子的高度拉大。
如果您看的书是《精通CSS+DIV网页样式与布局》,这个问题用到了,但是没有专门深入讲解;如果您看的是《CSS设计彻底研究》,这个问题有专门详细深入的介绍,您仔细看一下,应该没问题,这个问题好解决。
老师,您好!盒子在标准流中的定位原则-试验3中,如果父块高度进行了设置,ie6能容纳子块最小限度显示,在火狐里面则父块为固定尺寸,那么子块与父块间的距离,也就是他们之间相错的位置是根据什么定的?
吴昊,
你说的“相错”是什么意思?你是指谁和谁相错?您在具体说一下?
请问老师,我一直不明白margin和padding之间的区别,如果外面的div设置了padding,那么是不是就相当于内部的div设置了margin 或者反过来说,设置了内部div的margin就相当于外部设置了padding,是不是这样呢?
不知道现在留言还有没有回复,试下
天佑,
margin和padding有很大的区别:
1:margin在border的外面,padding在border里面。
2:相邻margin会产生合并效果,padding不存在。
3:背景会填充padding,而不会填充margin。
还有很多细节,你可以仔细研究一下。
老师好!
有个问题我不明白:就是第三课深入理解盒子模型(下)中你不是给了一些代码让,上面的第8幅图里的,我在IE6中显示的已经“CSS几何题”中的效果,可是在firefox2.0中为什么 就只有文字,没有其他背景效果呢???
小猪,
不应该啊,我这里试验的没有问题,你再仔细检查一下看。看看是不是漏了什么?
呵呵,可以了,谢谢老师~~
打错字咯,上面应该是:我在IE6中显示的就是“CSS几何题”的效果。
老师好,我用的浏览器是IE6.0,在做有阴影的链接效果时,我给要链接的文字加了border:1px solid #ffffff;可在预览的时候只有左右边有红色框,上下框却没有颜色,这是什么原因?浏览器的不支持?有没有什么补救方法?
骁将天下,
这样,你做一个最简单的能说明你的问题的网页,挂到网上,把地址写在这里,我帮你看一下,如果比较简单,我可以很快帮你找到解决方法。
老师您好!又来请教你.就是设置的盒子边框线(比如我设置一周都是虚线),在浏览器刚打开的时候可以看到是完整的,可过几秒钟后,有些地方的线就断了,断断续续很不好看。不知道是代码问题还是浏览器的问题呢?我用的是ie7。
IE确实对很多种边框属性支持不好,有些边框在IE中根本就不支持,有些虽然支持,但是效果不好,比如虚线。似乎没有太好的办法,等有时间的时候我仔细研究一下。
你好,今天看了第3课 深入理解盒子模型。有问题不明白,就是嵌套的盒子。父盒子设置padding,子盒子设置margin时候。 这两者之间的间隔怎么决定?? 我自己试了一下,不过没有看出来。谢谢
在标准流下,子盒子的宽度会自然伸展顶到两端,子盒子的margin和父盒子的pading会紧贴着,这个不存在什么特殊情况。
实际上如果页面中只有一个盒子,那么实际上这个盒子就是body的子盒子。你在dreamweaver或者Expression Web中输入:
<div style=”padding:10px;”><div style=”margin:10px;”></div></div>
在软件中可以清楚地看到margin和padding所占的区域。
能给个图解释一下吗
子盒子的Margin与padding紧贴着是什么意思
这个仔细看一下书吧,一两句话很难难说清楚~~~