统计在线人数...

由浅入深漫谈margin属性

[ 来源:不详 | 作者:blank | 时间:2007-9-11 下午 10:48:05 | 浏览:统计中... ]

平向右位移20px。或许有朋友问你分析的顺序怎么和margin表达式中出现的顺序不一样?如果按照margin表达式中出现的顺序来分析,结果是一样的,只是为了更好的方便大家的理解而没有按照表达式的顺序来分析。

用margin最后的实际显示大小的到底是怎么样呢,或许有朋友也比较疑惑,我暂时用逻辑大小和物理大小来区分(其实上面已用到此概念),到底什么是逻辑大小,什么是物理大小呢?!具体可以看图,物理大小指的是除去margin,也就是包含border以内的box大小,而逻辑大小,则是box通过margin解析规则解析后得到的大小(这或许可以解释为什么IE5会错误解析盒模型)。在上图中,box的实际显示的宽度等于box的逻辑大小,而box实际显示的高度等于box的物理大小,这说明box实际显示的大小可能是box的逻辑大小,也可能是box的物理大小,规则到底是怎样的——

box的实际大小=box的物理大小+正的margin

这仅对元素本身有效,对于其后面的相关元素,他们则只以margin的逻辑大小为准则,进行布局。

有朋友反应,听得很迷糊,越看越不懂,如果你对具体的理解过程不感兴趣的话,那记住下面我总结的结论就可以了,XD

结论box最后的显示大小等于box的border及border内的大小加上正的margin值。而负的margin值不会影响box的实际大小,如果是负的top或left值会引起box的向上或向左位置移动,如果是bottom或right只会影响下面box的显示的参考线。

经典论坛讨论:
http://bbs.blueidea.com/thread-2728471-1-1.html

本文链接:http://www.blueidea.com/tech/web/2007/4546.asp 

上一页  [1] [2] 

共有0人参与评价,平均得分:0分
评论内容只代表网友观点,与本站立场无关! 查看完整内容
   

广告位

当前在线人数
QQ:748838 MSN:allen_xia#msn.com E-mail:allenxia666#126.com QQ群:站长联盟北方区-北京(28200145) 站长联盟南方区-上海(67713522)