★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

DIV+CSS奇怪问题之边界(margin)叠加

http://www.csscnbbs.com/ShowPost.asp?ThreadID=47 2008/6/2 20:47:44 深山行者 字体:  浏览 16950 我要评论
当前标签
zoom边界重叠

边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇是,它们将形成一个边界,这个边界的高度等于两个边界高度中的较大者。

例如:我们在网页里加入两个层

以下为详细代码

两个层都设置为100宽 100高。第一个层背景色为红色,下边界(margin-bottom)为20 px.。第一个层背景色为黄色,上边界(margin-top)为30 px.。那么这两个层之间的距离是不是20+30=50px呢?其实不然,他们之间的距离应是他们边界中最大一个值,也就是30px。效果如图:

另外,当一个元素包含在另一个元素中时,它们的顶或底边界也发生叠加。比如:我们把层b放在a层内。
即<div id="a"><div id="b"></div></div>。然后为他们添加样式。

以下为详细代码

我们把a层设置为200*200大小,并为他添加上边界(margin-top:20px)为20px。B层样式不改变,上边界为30px。那么,这里b层距离浏览器是不是20+30=50px呢?答案肯定不是。因为发生了边界叠加,因此b层距离浏览器的距离仍然30px即(20px  30px 中最大的)。那么,a层距离浏览器的距离是20px吗?不是,而是30px.(也是边界中最大的一个)。所以,此时a b层距离浏览器的距离都是30px。 效果如图(火狐)

这就是所谓的边界叠加。但在IE里面支持的不够好,大家可以比较火狐和IE的效果差异。

注意:
1、只有普通文档流中的垂直边界才会叠加。浮动、绝对定位不会叠加
2、只有元素没有设置的padding border时,才发生边界叠加。
3、只有垂直边界才会发生叠加,水平边界不叠加。

如何消除边界叠加:
边界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。
1.外层 padding
2.透明边框 border:1px solid transparent;
3.绝对定位 postion:absolute:
4.外层DIV overflow:hidden;
5.内层DIV  加float:left; display:inline;
6.外层DIV有时会用到zoom:1;

相关阅读
( 2010/4/1 9:07:17 )网页小键盘/软键盘
( 2009/6/20 10:04:33 )来自网易空间排行宽度可以变化的选项卡
( 2009/1/5 20:15:33 )css解决中英混合链接下划线不对齐问题
( 2008/7/9 14:15:08 )字体放大效果,字体[大][中][小]
( 2008/6/29 20:45:46 )CSS教程:弄懂闭合浮动元素
( 2008/6/10 20:39:31 )PS常用密技
( 2008/6/3 11:19:31 )div默认高度根据内容自动适应高度
( 2008/4/26 22:56:59 )CSS教程:弄懂闭合浮动元素
共有0条关于《DIV+CSS奇怪问题之边界(margin)叠加》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)
IE8 CSS HACK 兼容
更多>>最新添加文章
sql server中前缀为PK、UK、DF、CK、FK表的意思
网站从http改成https(ssl证书)后设置301跳转将http跳转到https的方法
ASP利用fso读取文件夹里所有文件的名字
jquery动态生成的html代码中无法使用jquery事件的解决方法
asp实现获得当前文章的上一篇信息与下一篇信息功能及代码
asp导出内容到excel表并自定义命名后下载(非打开)
'禁止站外提交页面和数据
asp将中文汉字字符转为unicode编码(\u编码)与把unicode编码转为汉字
更多>>随机抽取信息
超级实用且不花哨的js代码大全( 8 )
利用CSS设置网页滚动条颜色
Word图片导出方法
CSS的十八般技巧
超强的中间自适应,左右固定,有许多值得学习的地方
深山行者留言系统V2.2 (简称留言板V2.2)
asp中求两个数的百分比(利用百分比函数FormatPercent就可以自带%的符号)
性感的CSS菜单(Menus)