盒模型之margin的叠加与加倍
来源:互联网 发布:程序员入职第一天 编辑:程序博客网 时间:2024/06/03 12:51
1、上下margin叠加问题
当两个对象呈上下关系,都具备margin属性,同时都不是浮动,这时候margin属性会造成外边距的叠加。
html代码如下所示:
上面的div跟下面的div间隔看起来10px,而不是我们预想的20px哦。注意,这里不是一个bug,而是CSS的设计者故意而为之,因为他们考虑到如果我们要对段落进行控制,如果第一段与上方距离10px,那第二段与第一段之间的距离就变成20px,这不是我们想要的,因此故意设计出了margin的上下叠加。
然后,如果一定要消除叠加的话,只需要给下面那个div添加像左浮动就好了。
2、如果我们把这两个div都向左浮动的话,自然也不存在margin上下空白叠加的问题,但是新的问题又来了——在IE 6中出现的左右margin加倍问题。
css代码如下:
IE 6
Firefox
当两个对象呈上下关系,都具备margin属性,同时都不是浮动,这时候margin属性会造成外边距的叠加。
html代码如下所示:
css如下:<div id="a"></div>
<div id="b"></div>
而真实情况呢?*{margin:0px;padding:0px;}
#a {
background-color: #999;
height: 100px;
width: 200px;
margin:10px;
}
#b {
background-color: #969;
height: 100px;
width: 200px;
margin:10px;
}
上面的div跟下面的div间隔看起来10px,而不是我们预想的20px哦。注意,这里不是一个bug,而是CSS的设计者故意而为之,因为他们考虑到如果我们要对段落进行控制,如果第一段与上方距离10px,那第二段与第一段之间的距离就变成20px,这不是我们想要的,因此故意设计出了margin的上下叠加。
然后,如果一定要消除叠加的话,只需要给下面那个div添加像左浮动就好了。
2、如果我们把这两个div都向左浮动的话,自然也不存在margin上下空白叠加的问题,但是新的问题又来了——在IE 6中出现的左右margin加倍问题。
css代码如下:
见效果图:*{margin:0px;padding:0px;}
#a {
background-color: #999;
height: 100px;
width: 200px;
margin:10px;
float: left;
}
#b {
background-color: #969;
height: 100px;
width: 200px;
margin:10px;
float: left;
clear: left;
}
IE 6
Firefox
是的,IE 6又让我纠结了,不过好在有解救的办法,设置对象的display:inline;就可以搞定了。
修改后代码如下:
IE 6
修改后代码如下:
效果如下:*{margin:0px;padding:0px;}
#a {
background-color: #999;
height: 100px;
width: 200px;
margin:10px;
float: left;
display: inline;
}
#b {
background-color: #969;
height: 100px;
width: 200px;
margin:10px;
float: left;
clear: left;
display: inline;
}
IE 6
看,得到想要的效果了,哈哈哈!
- 盒模型之margin的叠加与加倍
- IE margin加倍的问题
- css 左右Margin加倍的问题
- 左右margin加倍问题
- css之margin collapse(外边距叠加)
- css 之margin collapsing(外边距叠加)
- 盒模型的外边距叠加
- box模型之margin
- ie6下margin加倍问题。
- css盒模型的padding 和margin
- 上下Margin叠加问题
- 关于margin叠加问题
- Margin叠加问题
- 盒子模型-margin的使用
- 盒模型及margin padding
- 外边距叠加collapsing-margin
- CSS margin 边界叠加知识点
- margin叠加问题及解决办法
- jQuery方法大全
- javascript对象字面量
- 网页重构的步骤
- google 地图和baidu地图 在android上的实现过程和对比 包含 自定义图层的绘制
- 关于CSS布局
- 盒模型之margin的叠加与加倍
- 好玩的CSS属性之Selection
- 清除浮动的方式?
- 多核时代的移动开发(一)-函数式编程思想到来
- 闭合浮动元素(转发)
- [iPhone高级] 基于XMPP的IOS聊天客户端程序(IOS端二)
- CSS hack(小结)
- Javascript中的关键字this
- 写些关于Javascript函数的东西