塌陷问题


当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象。

①垂直并列

    首先设置两个DIV,并为其制定宽高
  1.  1 /*HTML部分*/
    2 <body>
    3 <div class="box1">box1</div>
    4 <div class="box2">box2</div>
    5 </body>
    6 /*CSS部分*/
    7 <style>
    8 *{
    9 margin: 0;
    10 padding: 0;
    11 }
    12 .box1{
    13 width: 200px;
    14 height: 200px;
    15 background: yellowgreen;
    16 }
    17 .box2{
    18 width: 200px;
    19 height: 200px; background: gray;
    20 }
    21 </style>
          
     
     对box1我们为其设置margin-bottom:50px;
     对box2我们为其设置margin-top: 40px;
  1.  1 <style>
    2 *{
    3 margin:0;
    4 padding:0;
    5 }
    6 .box1{
    7 width:200px;
    8 height:200px;
    9 background: yellowgreen;
    10 margin-bottom: 50px;
    11 }
    12 .box2{
    13 width:200px;
    14 height:200px;
    15 background: gray;
    16 margin-top: 40px;
    17 }
    18 </style>
      我们肯定会很理所当然的认定这两个盒子之间的距离为90px,事实上并非如此.
     如下图所示:
          
     两盒子之间的距离仅是50px,也就是说两盒子之间的margin出现了重叠部分,故而我们可以得出:垂直之间塌陷的原则是以两盒子最大的外边距为准。
 

②嵌套关系(父级元素塌陷)

  1.  1 /*CSS部分*/
    2 <style>
    3 .box1{
    4 width:400px;
    5 height:400px;
    6 background: pink;
    7 }
    8 .box2{
    9 width:200px;
    10 height:200px;
    11 background: lightblue;
    12 }
    13 </style>
    14 /*HTML部分*/
    15 <body>
    16 <divclass="box1">
    17 <divclass="box2"></div>
    18 </div>
    19 </body>
     如图示
 
         
    当为子盒子添加margin-top:10px;时会发生如下情况:
          
    子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙(即父级盒子往下塌陷了10px)。
 
解决方法:
(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合  (可以设置成透明:border:1px solid transparent)。
(2)为父盒子添加overflow:hidden;
(3)为父盒子设定padding值;
(4)为父盒子添加position:fixed;
(5)为父盒子添加 display:table;
(6)利用伪元素给子元素的前面添加一个空元素
.son:before{ content:"";
overflow:hidden; }

css中常见margin塌陷问题之解决办法的更多相关文章

  1. CSS中有关水平居中和垂直居中的解决办法

    CCS中让div等块级元素在父级元素中居中的方法: (1)div{  margin:0 auto   } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...

  2. JS 调试中常见的报错的解决办法

    报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) ...

  3. .NET中常见的内存泄漏和解决办法

    在.NET中,虽然CLR的GC垃圾回收器帮我们自动回收托管堆对象,释放内存,最大程度避免了"内存泄漏"(应用程序所占用的内存没有得到及时释放),但.NET应用程序"内存泄 ...

  4. CSS基础 margin塌陷问题以及解决 办法

    场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动 ...

  5. CSS中常见的布局

    一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qin ...

  6. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  7. CSS中上下margin的传递和折叠

    CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...

  8. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  9. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

随机推荐

  1. JeeSite中Excel导入导出

    在各种管理系统中,数据的导入导出是经常用到的功能,通常导入导出以Excel.CSV格式居多.如果是学习的过程中,最好是自己实现数据导入与导出的功能,然而在项目中,还是调用现成的功能比较好.近期一直使用 ...

  2. Day20 Ajax

    Ajax准备知识:json 什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w ...

  3. Web前端文件上传进度的显示

    跟后台关系不大,主要是前端js实现,具体使用了XMLHttpRequest的ProgressEvent事件,可以参考MDN中的Using XMLHttpRequest https://develope ...

  4. postgresql 异步流复制hot standby搭建

    先说说环境,主从库版本都是9.5,主库在CentOS物理机上,从库在Ubuntu虚拟机上 一.主库上的操作: 1.添加同步访问规则: host   replication     dbuser     ...

  5. jvm内存结构(一)

    学习之余,整理了下JVM的资料 堆: 需要重点关注的一块区域,涉及到内存的分配与回收 方法区: 用于存储已经被虚拟机加载的类信息.常量.静态变量等数据,也叫永久区 常量池: 用于存放编译期生成的各种字 ...

  6. Android 源码中的设计模式

    最近看了一些android的源码,发现设计模式无处不在啊!感觉有点乱,于是决定要把设计模式好好梳理一下,于是有了这篇文章. 面向对象的六大原则 单一职责原则 所谓职责是指类变化的原因.如果一个类有多于 ...

  7. [ Java面试题 ] 集合篇

    1.ArrayList和Vector的区别 这两个类都实现了List接口(List接口继承了Collection接口),他们都是有序集合,即存储在这两个集合中的元素的位置都是有顺序的,相当于一种动态的 ...

  8. C#实现的HttpGet请求

    话不多说,代码贴上: /// <summary> /// HTTP Get请求 /// </summary> /// <param name="url" ...

  9. Spring4托管Hibernate5并利用HibernateTemplate进行数据库操作

    时隔半年,再次发布配置类的相关Blog,因为左手受伤原因先做一个简述. 首先利用idea创建一个Spring+SpringMVC+Hibernate项目,注意的是因为我们要完全放弃Hibernate以 ...

  10. .net 弹出消息框后,页面样式变乱

    点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 Resp ...