margin塌陷

先举个例子

<style>

        body{

            background-color:#000;

        }

     .wrapper{

         width:200px;

         height:200px;

         background-color:red;

         margin-top:100px;

     }

     .box{

        width:50px;

         height:50px;

         background-color:#eee;

         opacity:0.8;

     }

    </style>

</head>

<body >

        <div class="wrapper">

            <div class="box"></div>

        </div>

</body>

距离上边100px;

现在给里面的小方块设置margin-top:100px;发现两个方块位置没动;

而当给里面的小方块设置margin-top:150px;小方块带着大方块往下移动了50px

原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.

但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.

margin塌陷解决方法

1.给父级设置边框或内边距(不建议使用)

 .wrapper{

         width:200px;

         height:200px;

         background-color:red;

         margin-top:100px;

         border-top:1px solid black;

     }

2.触发bfc(块级格式上下文),改变父级的渲染规则

方法:

改变父级的渲染规则有以下四种方法,给父级盒子添加

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷

 margin合并

原理:两个兄弟结构的元素在垂直方向上的margin是合并的

html

  <div class="box1"></div>

  <div class="box2"></div>

css

        *{

            margin:;

            padding:;

        }

        body {

            background-color: #000;

        }

        .box1 {

            height: 30px;

            margin-bottom: 100px;

            background-color: red;

        }

        .box2 {

            height: 30px;

            margin-top: 100px;

            background-color: aqua;

        }

margin合并问题也可以用bfc解决,

1.给box2加上一层父级元素并加上overflow:hidden;

  <div class="box1"></div>

   <div class="wrapper">

        <div class="box2"></div>

  </div>
.wrapper{

            overflow:hidden;

        }

2.给两个都加一层父级再加bfc

    <div class="wrapper">

        <div class="box1"></div>

    </div>

    <div class="wrapper">

        <div class="box2"></div>

    </div>

但是这两种方法都改变了HTML结构,在开发中是不能采用的

所以在实际应用时,在margin合并这个问题上,我们一般不用bfc,而是通过只设置上面的元素的margin-bottom来解决距离的问题

margin塌陷和margin合并问题及解决方案的更多相关文章

  1. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  2. 解决margin塌陷和margin合并

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding

    1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）

    盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...

  5. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  6. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  7. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

  8. 关于collapsed margin（外边距合并）

    这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...

  9. bug:margin塌陷

    margin塌陷:两个嵌套的div,内部div的margin-top失效,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值. 弥补方法: 1 ...

随机推荐

  1. hihocoder 1331 扩展二进制数(递归)

    传送门 题意 略 分析 由低位向高位考虑,令f(n)为n的扩展二进制数表示数 1.当前数为偶数,末位为0或2,那么f(n)=f(n/2)+f(n/2-1) 2.当前数为奇数,末位为1,那么f(n)=f ...

  2. hdoj1272【并查集】

    因为是第二遍,所以题目也没怎么看,然后一开始的思路就是如果每次输入两个点的时候判断是不是同一个集合,如果同一个就是No,然后就wa了,想想也是,然后瞄了一下题解,还要判连通-真是蠢死了-多个集合都想不 ...

  3. MyEclipse中安装SVN插件的最有效的方法

    (1)下载svn插件:http://subclipse.tigris.org/files/documents/906/49209/site-1.8.8.zip (2)解压svn包,找到其中的两个文件夹 ...

  4. 第十七篇 .NET高级技术之XML

    Xml 简介(可扩展标记语言) XML优点:容易读懂:格式标准任何语言都内置了XML分析引擎,不用单独进行文件分析引擎的编写. Xml就是用一种格式化的方式来存储数据,我们可以通过用记事本打开. .n ...

  5. 五个demo案例带你学习PHP反序列化漏洞

    一直想研究下php反序列化漏洞,花了几天时间做了个简单的了解..写篇文章记录下. 直白点就是围绕着serialize和unserialize两个函数. 一个用于序列化,一个用于反序列化. 我们通常把字 ...

  6. 跟我一起玩Win32开发（16）：ListView的多个视图

    在上一个例子中,我们只用到了ListView的Report视图,也就是详细视图.本文我们再把上一篇文章中所用的例子进行一下扩展,例子源码可以到俺的资源区下载. 我们为ListView中显示的数据加上图 ...

  7. ui自动化测试的意义与理解

    分层测试的思想 分层测试(有的也叫测试金字塔)是最近几年慢慢流行.火热起来的,也逐渐得到了大家的认可,大家应该已经比较熟悉分层测试的思想了,不太了解的可以自行找一些相应的渠道去补充一下上下文的知识. ...

  8. scau 1144 数星星 bit + 扫描线的思想

    这题如果用二维树状数组,则会直接爆内存. 那么可以运用扫描线的思路. 就是,它同时被x和y限制了,那么可以在查询的时候,确保x先满足了,(把x按小到大排序) 然后就相当于是关于y的一个一维bit了, ...

  9. python对ini配置文件处理

    实例文件: [root@docker2 ~]# cat test.ini [base] host = 192.168.88.121 port = 3306 user = root path = /ho ...

  10. ES--在windows上快速安装

    环境准备 java环境部署: Java下载路径:http://download.oracle.com/otn-pub/java/jdk/8u181-b13/96a7b8442fe848ef90c96a ...