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. 3.类和接口_EJ

    第13条: 使类和成员的可访问性最小化 良好的模块设计能隐藏其内部数据和其他实现细节,模块之间只通过它们的API进行通信.java语言提供了许多机制来协助隐藏信息.访问控制机制决定了类.接口和成员的可 ...

  2. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  3. Sql 判断函数是否存在、sql判断表是否存在、sql判断存储过程是否存在、sql判断视图是否存在

    --数据库是否存在 IF exists(SELECT * FROM master..sysdatabases WHERE name=N'库名') PRINT 'exists' ELSE PRINT ' ...

  4. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

  5. ABP问题速查表

    如果你领导要让你一夜之间掌握ABP,并且用ABP撸一个项目出来,你很可能很快速的过了一遍ABP文档就马上动手干活了.那么这篇文章就很适合你. 这篇文章列出了很多ABP新手问的问题和解答.注:有些同学问 ...

  6. Spring学习之旅(二)极速创建Spring框架java Web工程项目

    编译工具:eclipse 1)创建Web工程:spring_web_helloworld 2)导入所需jar包: 3)创建实体类:同上篇博文 4)创建配置文件hellobean.xml.同上篇博文 不 ...

  7. WPF:自定义Metro样式文件夹选择对话框FolderBrowserDialog

    1.前言 WPF并没有文件选择对话框,要用也就只有使用Winform版的控件.至今我也没有寻找到一个WPF版本的文件选择对话框. 可能是我眼浊,如果各位知道有功能比较健全的WPF版文件选择对话框.文件 ...

  8. PyCharm 如何新建Django工程项目

    声明:本文使用的IDE是PyCharm 2018.1.2版. 一.File-New Project 二.选择工程类型 强烈建议选项"Pure Python",因为如果选择" ...

  9. spring4笔记----web.xml中2.4以上版本Listener的配置

    基本上没用过Servlet2.4以下版本,所以2.4版本以下不必学了 <?xml version="1.0" encoding="UTF-8"?> ...

  10. [C#]List的Sort()、Find()、FindAll()、Exist()的使用方法举例

    [C#基础]List的Sort().Find().FindAll().Exist()的使用方法举例 List函数用得还是比较多的,正好用到其中的向个方法,做了一个例程,再总结一下: 先建一个学生类: ...