打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了。。。

关于margin,整理若干知识点如下:

一:父子关系的DIV标签以及未加margin时的样式

然后我们给父级和子集都加上margin如下:

实际效果如下:

我们会发现,蓝色的div的marginTop并没有起作用,这个就是所谓的marginCollapse(边界重叠),只计算二者最大的margin值进行显示,之前写Css的时候也常遇见,却不知道还有这么高大上的名字。。。惭愧。

整理解决方案如下:

  1.父div加一个border;

  2.父div加一个overflow:hidden;

  3.父div加padding;

  4.父或子div加float;

  5.父且子div加display:inline-block;

  6.子div加display:inline-block;

如有遗漏,欢迎补充。

margin collapse 之父子关系的DIV的更多相关文章

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

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

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

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

  3. 深入理解BFC和Margin Collapse

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

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

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

  5. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  6. Python:margin collapse

    margin collapse:边界 折叠/重叠/坍塌 此种现象只会垂直方向并且要满足一定条件时才会出现这种现象. https://tech.youzan.com/css-margin-collaps ...

  7. Vue_(组件通讯)非父子关系组件通信

    Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...

  8. Logstash 父子关系 配置

    最近在使用Lostash的过程中遇到了一个问题:在一个log文件里包含两类数据,而且两类数据之间存在父子关系,那如何使用lostash的configuration实现这个需求呢 思路: 首先定义父事件 ...

  9. iOS 父子关系

    1.面向对象特征,类的继承 成员变量(实例变量) 子类继承父类所有功能,只能直接(访问)调用父类中的.h中的protect和public成员变量(实例变量)及方法, .h中的私有的成员变量,子类不能直 ...

随机推荐

  1. 处理HTTP状态码

    1.1.4  处理HTTP状态码 上一节介绍HttpClient访问Web资源的时候,涉及HTTP状态码.比如下面这条语句: int statusCode=httpClient.executeMeth ...

  2. 华为上机:IP地址转换

    IP地址转换 描述: IP地址的长度为32,即有2^32-1个地址.IP地址一般采用点分十进制表示法,例如"192.168.1.1".IP地址也可以直接用一个32位的整数进行表示. ...

  3. C逻辑型变量——时控灯例子

    在C99标准颁布之前,我们通常都是用1或者0来表示逻辑的真与假,因此,当我们需要在程序中传递这种逻辑数据时,我们都是用整型数据类型int来表示这种逻辑型数据.然而,使用整型数据类型int来表示逻辑型变 ...

  4. ios开发--一个苹果证书怎么多次使用——导出p12文件

    为什么要导出.p12文件 当我们用大于三个mac设备开发应用时,想要申请新的证书,如果在我们的证书里,包含了3个发布证书,2个开发证书,可以发现再也申请不了开发证书和发布证书了(一般在我们的证书界面中 ...

  5. 谈谈MVC模式

    谈谈MVC模式   作者: 阮一峰 1. 如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architectural pattern),属于编程的方法论. MVC模式 ...

  6. Java笔记——面向接口编程(DAO模式)

    1.DAO模式  DAO(Data Access Object)模式就是写一个类,把访问数据库的代码封装起来.DAO在数据库与业务逻辑(Service)之间.     l  实体域,即操作的对象,例如 ...

  7. linux下安装配置DHCP服务器

    前提是已经安装了 core 及 base 两个组 1 2 3 4 5 # cat /etc/redhat-release   Red Hat Enterprise Linux Server relea ...

  8. Centos 7下安装Oracle 12c

    SQL Server玩了有些年,最近想玩玩Oracle,于是想到装一台Oracle server来玩玩.第一次在Linux下安装Oracle,整个过程参考了一篇文章:http://blog.csdn. ...

  9. 配置VNCserver

    翻译:yunqing原作者:Thomas Chung出处:http://fedoranews.org/tchung/vnc/ 声明: 版权属原作者Thomas Chung所有,转载请注明出处. 再说一 ...

  10. dojo 三 类和继承 dojo/_base/declare

    这里要讲有关类的定义.继承和实现.官方教程:http://dojotoolkit.org/documentation/tutorials/1.7/declare/类的声明是通过declare 这个方法 ...