css的外边距合并或者外边距塌陷问题
第一种情况：
已知两个宽和高均为100px，margin均为20px的div垂直排列，现象如下图所示：
当设置css1的margin-bottom：40px；或者css2的margin-top：40px时，现象如下图所示：
结论：
只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题，此问题也不需要解决，记住谁的外边距较大就采用谁的外边距就ok了。
水平排列的盒子不存在合并的问题。
下面实验证实：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
/*抽取两个盒子共同特点的代码*/
width:100px;
height: 100px;
margin: 20px;
float: left; /*左浮动实现盒子水平排列*/
}
/*分别设置两个盒子不同的颜色*/
.div1{
background: pink;
}
.div2{
background:#CCC;
}
</style>
</head>
<body> <div class="div1">css1</div>
<div class="div2">css2</div> </body>
</html>
现象为：
第二种情况：
一个宽高均为200px的div1内嵌一个宽高均为100px的div2，当给div2设置margin：30px时，现象为：
此时外面的这个大的div的margin也变成了30px，下面这段解决此问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .div1{
width: 200px;
height: 200px;
background: pink;
overflow: hidden; /*解决该问题的代码*/
/*border:1px solid black 第二种解决办法：给大div设置一个边框*/
}
.div2{
width:100px;
height:100px;
margin: 30px;
background:#CCC; }
</style>
</head>
<body> <div class="div1">
<div class="div2">css</div>
</div> </body>
</html>
需要在大的div中写入overflow: hidden;这句代码可以理解为让浏览器显示该div的时候检查一下是否有问题，如果有问题，浏览器来解决。第二种解决办法见上面的代码。
最后的现象为：
css的外边距合并或者外边距塌陷问题的更多相关文章
- CSS外边距合并&块格式上下文
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...
- margin显示怪异，外边距合并问题
很多时候我们使用两个div,内层的div设置文字,需要垂直居中与上层div,但是怎么设置样式都不行,vertical-align:middle也不行. 代码: <div style=" ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...
- CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- 关于CSS的外边距合并问题
首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...
- CSS 外边距合并。
<div id = "parent"> <div id = "child"> demo </div> </div> ...
- CSS 垂直外边距合并：规范、延伸、原理、解决办法
<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...
- CSS外边距合并的几种情况
CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...
随机推荐
- cf 337 div2 c
C. Harmony Analysis time limit per test 3 seconds memory limit per test 256 megabytes input standard ...
- asp网站中使用百度ueditor教程.txt
1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1. ...
- 使用jquery将表单自动封装成json对象 /json对象元素的添加删除和转换
$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function ( ...
- C#学习笔记_08_面向对象
08_面向对象 面向对象:一种看待问题解决问题的思维方式,着眼点在于找到一个能够帮助我们解决问题的实体,然后委托这个实体来帮我们解决问题:(在面向对象之前你要有一个女朋友,否则代码会经常出现bug) ...
- Flask - 路由系统
目录 Flask - 路由系统 @app.route()装饰器中的常用参数 methods : 当前 url 地址,允许访问的请求方式 endpoint:反向url地址,默认为视图函数名(url_fo ...
- 《Java JDK 8 学习笔记》序
摘录自<Java JDK 8 学习笔记> 翻开一本书,无非是想从书中得到知识,只是为何你要得到书中的知识,才是我想知道的答案,而这个答案决定了你在取得知识的过程中是否快乐! 多数人在取得知 ...
- Sencha Touch 2中如何动态添加button
原理很简单无非就是在一个容器上面选中id,用容器的add方法将button循环加入. 现在我们来试一下 1.先定义一个Container组件用,以后在里面添加button ? 1 2 xtype:'c ...
- Spring Boot开发HTTPS协议的REST接口
Spring Boot开发HTTP的REST接口流程在前文中已经描述过,见<SpringBoot开发REST接口>. 如需要支持HTTPS,只需要在如上基础上进行设置.修改/resourc ...
- Vim+xxd=强大的十六进制编辑器
Vim 是黑客文化中强大的编辑器.利用它调用外部十六进制文件显示命令xxd就可以顺利的编辑二进制文件了. 其中,%在vimComandLine时代表当前文件的路径,xxd是以十六进制显示一个文件,xx ...
- [poj3321]Apple Tree_dfs序_树状数组
Apple Tree poj-3321 题目大意:给你一个根固定的树,每一个点的点权是0或1,查询子树点权和. 注释:$1\le n \le 10^5$. 想法:刚刚学习dfs序,刷到水题偶哈哈. 什 ...