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

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

http://www.csscnbbs.com/ShowPost.asp?ThreadID=47 2008/6/2 20:47:44 深山行者 字体:  浏览 17880 我要评论
当前标签
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中的scale()实现放大缩小效果
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
解决手机端微信浏览器中视频自动播放和默认全屏问题
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
更多>>最新添加文章
uni-app三目运算class和style
uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
微信小程序开发中链接navigateTo与redirectTo的对比说明
使用uni-app开始小程序使用腾讯视频插件vid播放视频
微信小程序-接入广告
uni-app微信小程序获得用户头像与名称
微信公众号生成带参数的二维码asp源码下载
微信小程序转uni-app项目
更多>>随机抽取信息
CSS关于box(盒模式)的一系列问题详解
JS自动获取TAGS关键词
返回上一页页面特效
告诉你一些GOOGLE搜索你不知道的东西
使用uni-app开始小程序使用腾讯视频插件vid播放视频
收集的javascript客户端验证函数大全
代码绝对精简的仿lightbox效果弹出层
微信小程序转uni-app项目