解决margin塌陷和margin合并
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title>嘿嘿嘿</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover"> </head>
<style type="text/css">
body{
background: #f5f5f5;
}
.father-box{
width: 150px;
height: 150px;
background-color: black;
margin: 20px;
}
.father-box .son-box{
width: 50px;
height: 50px;
background-color: greenyellow;
margin: 20px;
}
.brother-two{
width: 150px;
height: 20px;
background-color: gold;
margin: 20px;
}
</style>
<body>
<div class="father-box brother">
<div class="son-box"> </div>
</div>
<div class="brother brother-two">
黄色的是20px的高度
</div> </body> </html>
例子代码
结果为：
上面执行的代码可以看到两个经典的cssbug:
father-box ：黑色盒子；son-box：绿色盒子；brother-two：黄色盒子
1、margin合并
黑色 和 黄色的盒子 都设置了 margin:20px， 按理说黑色和黄色的垂直间距是40px, 但是事实是20px, 这就是margin合并造成的。
margin合并：普通文档流中块级元素的垂直外边距会互相合并，也就是会以他们之间外边距大的为准，比如：
我如果现在将黄色的盒子的margin-top设为10px;黄色和黑色之间的间距不会改变，依旧是20px;但是如果设为30px,那么黄色和黑色之间的间距就会以较大的30px为准，变为30px;
解决方法：
推荐也是常用的：如果要上下间距为40px,只需要黄色的盒子上边距设为40px,黑色的盒子不用设下边距，这样就可以了，意思是不需要强行解决这个bug,只需要将一边的边距设为两个盒子边距的和就可以了
不推荐也是不常用的（这样会改变html结构）：在黄色和黑色的盒子外面在加一个盒子，让这个加的外层盒子的渲染规则改为BFC（https://www.cnblogs.com/xingyue525/p/10924882.html）
2、margin 塌陷
黑色 和 绿色 的margin-top都设为了20px，但是绿色并没有距离黑色上边20px。
margin 塌陷：普通文档流中父子块级元素，如果父元素没有设置上内边距或上边框，子元素的上边距就会和父元素的上边距重合，以他们两个中间最大上边距为准，与距离他们最近的盒子隔开。如:
如果我现在给绿色的盒 子设置margin-top:40px, 那么黑色和绿色的盒子会一起向下移动20px。
解决方法：
将父元素的渲染规则改为BFC（https://www.cnblogs.com/xingyue525/p/10924882.html）
这里简单的列举一些触发BFC的方法：
1、float:left/right;
2、position:absolute;
3、overflow:hidden;
4、display:inline-block;
解决margin塌陷和margin合并的更多相关文章
- margin塌陷与margin合并（margin），清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
- margin塌陷和margin合并问题及解决方案
margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...
- 12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding
1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- margin的两个有趣现象：margin合并和margin塌陷
margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...
- 学习笔记------------解决margin塌陷
首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...
- 触发bfc解决父子元素嵌套垂直方向margin塌陷问题
首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-colo ...
- 关于collapsed margin（外边距合并）
这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...
随机推荐
- python利用Remove.bg接口自动去背景(转)
转 https://blog.csdn.net/Quentin_he/article/details/97569625 前段时间基友找我让帮忙把他的结婚登记照扣出来换一个背景当作简历照,好在我之前学过 ...
- Expires
(装载) 简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件 ...
- JS---案例：旋转木马
案例:旋转木马 页面加载时候出现的效果,script标签写在head里面,body上面 显示一个图片散开的动画,遍历之后,把每个图片用封装的动画函数移动到指定目标(同时改变多属性:宽,透明度,层级,t ...
- 机器学习之决策树(ID3)算法与Python实现
机器学习之决策树(ID3)算法与Python实现 机器学习中,决策树是一个预测模型:他代表的是对象属性与对象值之间的一种映射关系.树中每个节点表示某个对象,而每个分叉路径则代表的某个可能的属性值,而每 ...
- Sublime Text3安装教程，配置教程，常用插件安装等方法
前言: sublimeText3的特点: 1.Sublime Text 是一款跨平台代码编辑器,在Linux.OS X和Windows下均可使用. 2.Sublime Text 是可扩展的,并包含大量 ...
- log4j:ERROR Could not read configuration file [log4j.properties]
遇到这个错误,程序能够正常运行,log4j.properties也在classpath中,后来在网上查了资料,把下面这个语句去掉就好啦. PropertyConfigurator.configure( ...
- 廖雪峰Python总结2
1.切片 L[0:3]表示,从索引0开始,直到索引3为止,但是不包括索引3.如果第一个索引是0,还可以省略L[:3] 倒数切片:L[-n:-1],-1是倒数第一个元素,L[-n:-1]不包括倒数第一个 ...
- SPSS统计分析过程包括描述性统计、均值比较、一般线性模型、相关分析、回归分析、对数线性模型、聚类分析、数据简化、生存分析、时间序列分析、多重响应等几大类
https://www.zhihu.com/topic/19582125/top-answershttps://wenku.baidu.com/search?word=spss&ie=utf- ...
- python 同名变量引用
- oracle-ORA-01555错误
Snapshot too old 原因:没有足够的撤销空间满足读一致性而需要撤销信息的长查询