外边距折叠
来源:互联网 发布:横道图用什么软件编制 编辑:程序博客网 时间:2024/05/14 22:46
1.概念
外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距
毗邻:1.两个或多个外边距没有被非空内容、padding、border或clear分隔开。2.margin都处于普通流中,即非浮动,非定位、非浮动元素。
在没有被分隔开的情况下,一个元素的margin-top会和它普通流中的第一个元素的margin-top相邻;只有在一个元素的height:auto的情况下,margin-bottom才会和最后一个子元素的margin-bottom相邻。
示例代码:
<div style="border:1px solid red; width:100px;"> <div style="margin:50px 0; background-color:green; height:50px; width:50px;"> <div style="margin:20px 0;"> <div style="margin:100px 0;">B</div> </div> </div></div>
效果图:
分析:父元素的height不是auto,所以margin-bottom不会折叠,父元素的margin-bottom仍为50px,子元素margin-bottom为100px;margin-top发生折叠,折叠结果为100px,撑开最外层父元素的高。
示例代码:
<div style="border:1px solid red; width:100px;"> <div style="margin:50px 0; background-color:green; height:auto; width:50px;"> <div style="margin:20px 0;"> <div style="margin:100px 0;">B</div> </div> </div></div>
效果图:
分析:父元素的height为auto,所以margin-bottom会折叠,折叠后margin-bottom为100px;margin-top发生折叠,折叠结果为100px。
2.折叠后margin的计算
1)参与折叠的margin都是正值
margin都是正数,取其中margin较大的值为最终margin值
2)参与折叠的margin都是负值
margin都是负值,取其中绝对值较大的,然后从0开始负向位移
实例代码:
<div style="height:100px; margin-bottom:-75px; width:100px; background-color: yellow;">A</div><div style="height:100px; margin-top:-50px;margin-left:30px; width:100px; background-color: skyblue;">B</div>
效果图:
3)参与折叠的margin中有正值有负值
有正有负,取出负margin中绝对值最大的,然后和正margin值最大的相加
示例代码:
<div style="height:100px; margin-bottom:100px; width:100px; background-color: yellow;">A</div><div style="height:100px; margin-top:-50px;margin-left:30px; width:100px; background-color: skyblue;">B</div>
效果:
4)相邻的margin要一起参与计算,不得分布计算
相邻的元素不一定非要是兄弟节点,父子节点也可以。计算时,相邻的margin要一起参与计算,不能分布计算
示例代码:
<div style="margin:50px 0; background-color:green; width:50px;"> <div style="margin:-60px 0;"> <div style="margin:150px 0;">A</div> </div></div><div style="margin:-100px 0; background-color:green; width:50px;"> <div style="margin:-120px 0;"> <div style="margin:200px 0;">B</div> </div></div>
多个margin折叠成一个margin,取所有相关的值一起计算。计算A、B之间的margin折叠,将6个margin一起计算
正值:50px,150px,200px,最大正值为200px
负值:-60px,-100px,-120px,绝对值最大的是-120px
最终折叠后的margin应该是200+(-120)=80px;
效果图:
3.浮动元素、inline-block元素、绝对定位元素的margin不会和垂直方向上其他元素的margin折叠
与和它相邻的子元素也不会折叠
示例代码:
<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div><div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;"> <div style="margin-top:50px; background-color:gold;">B</div></div>
效果图
4.创建块级格式化上下文的元素,不和它的子元素发生margin折叠
示例代码:
<div style="margin-top:50px; width:100px; height:100px; background-color:green;"> <div style="margin-top:50px; background-color:gold;">B</div></div>
效果:
利用overflow:hidden创建块级格式上下文,不会折叠,示例代码:
<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;"> <div style="margin-top:50px; background-color:gold;">B</div></div>
效果图:
5.元素自身的margin-bottom和margin-top相邻与会折叠
元素自身的margin-bottom和margin-top相邻,只能是内容为空,且垂直发方向上border和padding为0
实例代码:
<div style="border:1px solid red; width:100px;"> <div style="margin-top: 100px;margin-bottom: 50px;"></div></div>
效果图:
- CSS外边距折叠
- 外边距折叠
- margin外边距折叠
- 解决外边距折叠问题
- 【CSS】垂直外边距折叠
- 外边距折叠( Collapsing margins )详解
- css-margin collapse外边距折叠
- 简单的外边距折叠问题
- 框模型之外边距(margin)折叠
- 揭开外边距折叠Collapsing margins的面纱
- CSS框模型中外边距(margin)折叠图文详解
- 【分享】说说标准 —— 揭开外边距折叠(Collapsing margins)的面纱
- CSS框模型中关于外边距(margin)折叠的情况
- 父元素未被子元素的margin撑开-外边距折叠问题
- 盒模型再回顾:外边距折叠与怪异盒模型
- 外边距叠加
- CSS外边距合并
- css外边距合并
- 设计模式-结构型软件设计模式(四)
- 深层克隆和浅层克隆
- Vim技能修炼教程(12)
- 设计模式-行为型软件设计模式(一)
- Perl语言入门——Perl变量简介
- 外边距折叠
- 机器学习
- 机械基础知识—齿轮
- 数据类型转换
- hbuilder的移动端APP如何实现微信支付,求具体流程详解
- 数组简解!!!
- 【原创】【贪心】Yogurt factory POJ-2393
- spring jquery Mobile 页面跳转后浏览器url未改变&&javaScript代码刷新后才能执行的问题解决
- 前端优化 9 个技巧,提高 Web 性能