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. js 属性增改删操作

    js 属性增改删操作,可参看菜鸟教程,这里记录一个小问题:disabled属性 使用setAttribute操作无法 禁用disabled属性,需使用removeAttribute操作,原因是只要有d ...

  2. laravel接值 get post

    laravel使用一种简单的方式来访问用户提交的信息. 你可以用统一的方式来访问用户提交的信息,而不用为用户提交信息的方式操心. 引用类:use Illuminate\Support\Facades\ ...

  3. bootstrap table 获取数据后的前台页面(后台怎么传就不必详细说明了吧)

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ t ...

  4. 基于Log4j完成定时创建和删除日志的方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 Log4j作为常用的日志生成工具,其清除日志的策略却十分有限. ...

  5. Copy Control settings

    Copy Control settings     Skip to end of metadata   Created by Rajesh Banka, last modified by Jyoti ...

  6. yarn安装ant-报错

    异常现象: 使用react引用antd的库时报错 yarn add antd Trace: Error: connect ETIMEDOUT 114.55.80.225:80 at Object._e ...

  7. UoW中修改VIM的配色方案

    在WIN10中提供Bash on Ubuntu on Windows,即在win中提供一个Ubuntu子系统,可以使用bash.该系统中自带的VIM的配色方案colorscheme为默认的,不怎么好, ...

  8. Python-Django 第一个Django app

    第一个Django app   by:授客 QQ:1033553122 测试环境: Python版本:python-3.4.0.amd64 下载地址:https://www.python.org/do ...

  9. 浅谈Kotlin(三):类

    浅谈Kotlin(一):简介及Android Studio中配置 浅谈Kotlin(二):基本类型.基本语法.代码风格 浅谈Kotlin(三):类 浅谈Kotlin(四):控制流 前言: 已经学习了前 ...

  10. tornado 初解

    对于使用习惯Django的我来说,tornado实在是很简陋,没有那么多复杂的文件分类. 在tornado中,一个简单web只需要十几行简单的代码就OK了 import tornado.web imp ...