CSS外边距叠加问题
转自:http://www.cnblogs.com/winter-cn/archive/2012/11/16/2772562.html
读过李松峰老师翻译的新书中《CSS设计师指南(第3版》的外边距叠加部分( http://www.ituring.com.cn/article/16969)实在是有些捉急啊,这地方实在是有些没写到位,也有错误(如“叠加的只是垂直外边距,水平外边距不叠加”)
margin collapsing现象
BFC(block formatting context)中相邻的两个block-level的盒,上一个box的下边距会跟下一个box的上边距发生叠加,即两者取最大的,而不是相加:
run
<!doctype HTML> <html> <head> <style type="text/css"> #green {margin:10px 10px 10px 10px}#blue {margin:10px 10px 10px 10px}#red {margin:10px 10px 10px 10px} </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"></div> <div id="blue" style="background:lightblue;height:100px;width:100px;"></div> <div id="red" style="background:pink;height:100px;width:100px;"></div> </body> </html>
margin collapsing与方向无关
《CSS设计师指南(第3版》中讲到“叠加的只是垂直外边距,水平外边距不叠加”,这个说法是错误的,叠加与否完全取决于两个box是否是位于同一BFC的两个相邻box,与水平垂直无关,下面例子中,更改了body的writing-mode,于是叠加发生在了水平方向(仅ie可看)
run
<!doctype HTML> <html> <head> <style type="text/css"> #green {margin:10px 10px 10px 10px}#blue {margin:10px 10px 10px 10px}#red {margin:10px 10px 10px 10px} body { writing-mode:tb-rl; } </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"></div> <div id="blue" style="background:lightblue;height:100px;width:100px;"></div> <div id="red" style="background:pink;height:100px;width:100px;"></div> </body> </html>
margin collapsing仅仅发生在BFC
margin collapsing不发生在IFC
当把元素的display属性设为inline-block,它们都位于IFC当中,所以不论水平还是竖直方向,都不会发生叠加:
run
<!doctype HTML> <html> <head> <style type="text/css"> #green {margin:10px 10px 10px 10px; display:inline-block;}#blue {margin:10px 10px 10px 10px; display:inline-block; }#red {margin:10px 10px 10px 10px; display:inline-block;} </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;"></div><br/><div id="red" style="background:pink;height:100px;width:100px;"></div> </body> </html>margin collapsing不发生在floats
当把元素的float属性设为left,它们都不在正常流中,更不在BFC中了,同样不论水平还是竖直方向,都不会发生叠加:
run
<!doctype HTML> <html> <head> <style type="text/css"> #green {margin:10px 10px 10px 10px; float:left;}#blue {margin:10px 10px 10px 10px; float:left; }#red {margin:10px 10px 10px 10px; clear:left; float:left;} </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"></div> <div id="blue" style="background:lightblue;height:100px;width:100px;"></div> <div id="red" style="background:pink;height:100px;width:100px;"></div> </body> </html>
margin collapsing可能跨元素
当一个容器既没有border又没有padding时,它的第一个子box的的margin也能跟它的上一个容器的margin发生叠加:
run
<!doctype HTML> <html> <head> <style type="text/css"> #green {margin:10px 10px 10px 10px; }#blue {margin:5px 10px 10px 10px; }#red {margin:10px 10px 10px 10px; } </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"> </div> <div id="blue" style="background:lightblue;height:100px;width:100px;"> <div id="red" style="background:pink;height:100px;width:100px;"></div></div> </body> </html>
margin collapsing不能跟padding(内边距)折叠
有padding(内边距)的时候,上一节的情况不发生:
run
<!doctype HTML> <html> <head> <style type="text/css"> #green {margin:10px 10px 10px 10px; }#blue {margin:10px 10px 10px 10px; padding:10px 10px 10px 10px; }#red {margin:10px 10px 10px 10px; } </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"> </div> <div id="blue" style="background:lightblue;height:100px;width:100px;"> <div id="red" style="background:pink;height:100px;width:100px;"></div></div> </body> </html>
margin collapsing不能跟跨越BFC
当一个容器在其内部创建新的BFC时,跨元素折叠的情况也不会发生。
run
<!doctype HTML> <html> <head> <style type="text/css"> #green {margin:10px 10px 10px 10px; }#blue {margin:10px 10px 10px 10px; overflow:hidden; }#red {margin:10px 10px 10px 10px; } </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"> </div> <div id="blue" style="background:lightblue;height:100px;width:100px;"> <div id="red" style="background:pink;height:100px;width:100px;"></div></div> </body>
CSS外边距叠加问题相关推荐
- css怎样清除外边距,CSS 外边距
CSS 外边距 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值 ...
- 外边距叠加collapsing-margin
前端时间做改造公司一个很老的产品,去掉边框后发现高度增加了很多,百思不得其解,后来无意间发现了"外边距叠加collapsing-margin"这一说法,赶紧的找度娘问问.恍然大悟啊 ...
- CSS外边距折叠引发的问题
CSS外边距折叠 第一种:两个块级元素的上下边距折叠 第二种:父元素和子元素(或者最后一个元素)的外边距 第三种:空的块级元素的上下外边距 折叠的根本原因: margin之间直接接触,没有阻隔 折叠后 ...
- 4、CSS 外边距margin
围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CS ...
- CSS外边距(margin)重叠及防止方法
#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法 #1-什么是外边距margin重叠1. 什么是外边距(margin)重叠 外边距重叠是指两个或多个盒子(可能相邻也可 ...
- [css] 外边距重叠是什么?重叠的结果是什么?怎么防止外边距重叠?
[css] 外边距重叠是什么?重叠的结果是什么?怎么防止外边距重叠? 外边距重叠是什么?外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 重叠后的外边距的高度等于两个发生重叠的外边距的 ...
- css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
- CSS外边距margin
CSS外边距margin CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin 可 ...
- CSS外边距合并问题以及方法
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝 ...
最新文章
- Django:ORM关系字段
- CNN: 查看tensorflow Pb模型所有层的名字
- Hibernate应用程序级可重复读取
- Linux下文件的权限管理及网络连接
- 线上线下同步开启安全盛宴 BCS 2020将于8月7日正式开幕
- 2013年总结(4)-人脉
- python数据库def函数_Python:函数
- 浅谈一次QQ被盗取(攻击)事件
- html怎么隐藏音频的图标,XP系统realtek高清晰音频管理器图标如何隐藏
- 百度地图,坐标反查,拾取坐标位置
- P5144 【蜈蚣】
- 中兴笔试与面试经验总结
- 大数据MBA 通过大数据实现与分析驱动企业决策与转型
- K-D 树, 高维空间索引
- 2285服务器装solaries系统,一套完整的简易太阳能发电系统的安装过程演示
- 巡更巡查系统QY-LY51
- 弘辽科技:淘宝店铺如何优化排名?有哪些优化方法呢?
- ARM处理器中断处理机制
- 邮件服务器 之 利用debian sarge和postfix 2.1构建媲美ISP的邮件系统
- H5canvas基础