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 ...
随机推荐
- [如何在mac下使用gulp] 2. gulp模块的常用方法
常用的gulp模块方法有: gulp.src() gulp.src('client/one.js'); //指定明确的要处理文件 gulp.src('client/*.js'); //处理client ...
- 37.分组聚合操作—其他metric
课程大纲 要学其他的metric(count,avg,max,min,sum) count:bucket,terms,自动就会有一个doc_count,就相当于是count avg:avg a ...
- python 简单爬取今日头条热点新闻(一)
今日头条如今在自媒体领域算是比较强大的存在,今天就带大家利用python爬去今日头条的热点新闻,理论上是可以做到无限爬取的: 在浏览器中打开今日头条的链接,选中左侧的热点,在浏览器开发者模式netwo ...
- python--(十五步代码学会进程)
python--(十五步代码学会进程) 一.进程的创建 import time import os #os.getpid() 获取自己进程的id号 #os.getppid() 获取自己进程的父进程id ...
- tipsText表单验证（注册）
注册表单验证脚本 <script src="/assets/skins/js/jquery-1.11.2.min.js"></script> <scr ...
- 并发通信Manage，队列， 互斥锁
目录 Manage 队列 先入先出 互斥锁 Manage 进程间的通信是被限制的 from multiprocessing import Process a = 1 def func(): glob ...
- 【[Offer收割]编程练习赛12 A】歌德巴赫猜想
[题目链接]:http://hihocoder.com/problemset/problem/1493 [题意] [题解] 枚举P从2..n/2 如果P是质数且N-P也是质数; 则输出P和N-P就好; ...
- noip模拟赛 三部曲
分析:子树上操作,要用到线段树+dfs序,关键就是子树内k还要增加,这个就不是很好办.可以求出在根节点+0后每个点会加多少,记为d[i],如果要对点x进行A操作,实际上只需要对子树加k - d[i]再 ...
- hdu 4941 stl的map<node,int>用法
#include<iostream> #include<cstdio> #include<cstring> #include<map> using na ...
- [poj3974]Palindrome_Manacher
Palindrome poj-3974 题目大意:求字符串的最长回文子串. 注释:$1\le strlen(s) \le 10^6$. 想法:介绍一种字符串算法——Manacher.求以每一个字符和字 ...