margin collapse:边界 折叠/重叠/坍塌

此种现象只会垂直方向并且要满足一定条件时才会出现这种现象。

https://tech.youzan.com/css-margin-collapse/

在CSS中,两个或多个毗邻的普通流中的盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外边距会发生叠加,这种形成的外边距称之为外边距叠加。

我们可以注意定义中的几个关键字:毗邻两个或多个垂直方向普通流

外边距叠加存在两种情况:一是父子外边距叠加;二是兄弟外边距叠加。

从定义中我们可以很清楚的知道要符合哪些情况才会发生外边距折叠:

  • 都属于普通流的块级盒子且参与到相同的块级格式上下文中
  • 没有被paddingborderclearline box分隔开
  • 都属于垂直毗邻盒子边缘:
    • 盒子的top margin和它第一个普通流子元素的top margin
    • 盒子的bottom margin和它下一个普通流兄弟的top margin
    • 盒子的bottom margin和它父元素的bottom margin
    • 盒子的top marginbottom margin,且没有创建一个新的块级格式上下文,且有被计算为0的min-height,被计算为0或autoheight,且没有普通流子元素

形成 BFC 的条件(符合以下任一条件即可): 
1) float 的值不为 none;
2) overflow 的值不为 visible;
3) display 的值为 table-cell、table-caption 和 inline-block 之一;
4) position 的值不为 static 或 relative 中的任何一个;
3. BFC 常见作用

https://blog.csdn.net/qq_33435265/article/details/54705946

Python:margin collapse的更多相关文章

  1. 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  2. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  3. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?

    这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...

  4. 深入理解BFC和Margin Collapse

    深入理解BFC和Margin Collapse   BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威 ...

  5. Python:wordcloud

    wordcloud官方文档 1.简介 wordcloud是优秀的词云展示的第三方库 2.导入模块 import wordcloud 3.wordcloud对象初始化 以下参数值均为官方文档给出的默认值 ...

  6. Python:使用threading模块实现多线程编程

    转:http://blog.csdn.net/bravezhe/article/details/8585437 Python:使用threading模块实现多线程编程一[综述] Python这门解释性 ...

  7. css margin collapse

    css中存在margin collapse,即边界塌陷或边界重叠. http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.h ...

  8. Python:渗透测试开源项目

    Python:渗透测试开源项目[源码值得精读] sql注入工具:sqlmap DNS安全监测:DNSRecon 暴力破解测试工具:patator XSS漏洞利用工具:XSSer Web服务器压力测试工 ...

  9. Python:开发Sublime插件,方便PHP开发

    Python:开发Sublime插件,方便PHP开发 背景 最近在学习PHP,开发环境选择了Sublime2,开发过程发现执行PHP程序非常不方便,需要自己在浏览器中输入路径以进行调试,这点不如Dre ...

随机推荐

  1. 2017 ACM-ICPC西安网赛B-Coin

    B-Coin Bob has a not even coin, every time he tosses the coin, the probability that the coin's front ...

  2. vue-awesome-swiper 水平滚动异常

    使用教程:https://github.com/cynthiawupore/vue-awesome-swiper 实例: <template> <div class="in ...

  3. Python 实现批量从不同的Linux服务器下载文件

    基于Python实现批量从不同的Linux服务器下载文件   by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/file_for_downl ...

  4. <python3-cookbook>第一章:数据结构和算法

    第一章:数据结构和算法 介绍:python3-cookbook这本书是高级用法,不是小白使用书目的:写作目的是记录下自己学习这本书的过程以及收获书籍地址:https://python3-cookboo ...

  5. Python minidom模块(DOM写入和解析XML)

    一.DOM写XML文件 #导入minidom from xml.dom import minidom # 1.创建DOM树对象 dom=minidom.Document() # 2.创建根节点.每次都 ...

  6. Cas 服务器 Service(Cas客户端)注册信息维护

    作为Cas服务器,允许哪些客户端接入与否是通过配置来定义的.对Cas服务器来说,每一个接入的客户端与一个Service配置对应:在Cas服务器启动时加载并注册上这些Service,与之对应的客户端才能 ...

  7. shell编程-test命令(七)

    test命令常用作检查某些条件是否成立. 数值测试 -eq:检测两个数是否相等,相等返回true -ne:检测两个数是否相等,不相等返回true -gt:检测左边的数是否大于右边,是则返回true - ...

  8. sql 语句按字段指定值排序及分页

    为特定字段赋值并排序 表[Table_temp]中列[col1]为字符,属性为varchar(),排序时需要按照B.A.C的顺序显示,则可按照以下SQL语句: select * from Table_ ...

  9. PostgreSQL 表值函数

    方法1create type deptSon as ( mid ), id ), name ), DeptParentId ) ); CREATE OR REPLACE FUNCTION functi ...

  10. 【底层原理】深入理解Cache (上)

    存储器是分层次的,离CPU越近的存储器,速度越快,每字节的成本越高,同时容量也因此越小.寄存器速度最快,离CPU最近,成本最高,所以个数容量有限,其次是高速缓存(缓存也是分级,有L1,L2等缓存),再 ...