margin的两个有趣现象：margin合并和margin塌陷
margin合并
当两个元素在垂直方向并列，分别设置margin值时会发生一个margin合并的现象
举个例子，有两个div，垂直并列，box1设置margin-bottom:20px，box2设置margin-top:50px，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
margin：0;
padding: 0;
}
div{
width: 50px;
height: 50px;
}
#box1{
margin-bottom: 20px;
background: red;
}
#box2{
margin-top: 50px;
background: blue;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
按照一般的思维，这两个div之间的距离就应该是70px，事实并非如此，两个div之间的距离只有50px，因为两个div的margin重叠，它会取最大值
一般来说margin合并不常见，因为只需设置一个div的margin来达到二者之间的距离就可以了
margin塌陷
margin塌陷很常见，存在于嵌套关系的盒子之间。
有两个div，box1包含box2，给box2一个margin-top:20px，让box2和box1之间产生20px的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
margin：0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background: red;
}
#box2{
width: 50px;
height: 50px;
margin-top: 20px;
background: blue;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
结果会发现box1和box2没产生距离，反而是box1带着box2离页面顶端20px
解决办法：
- 给父级盒子设置overflow:hidden
- 给父级盒子设置border
- 给父级盒子设置padding
margin的两个有趣现象：margin合并和margin塌陷的更多相关文章
- margin塌陷与margin合并（margin），清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
- margin和padding那点事及常见浏览器margin padding相关Bug
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...
- python---手动实现两个有序列表的合并
可能又和标准的实现不一样, 但是自己的实现, 印象就会不一样的. # coding = utf-8 # 两个有序列表的合并,将two_list合并到one_list def merge_order_l ...
- java实现两个不同list对象合并后并排序
工作上遇到一个要求两个不同list对象合并后并排序1.问题描述从数据库中查询两张表的当天数据,并对这两张表的数据,进行合并,然后根据时间排序.2.思路从数据库中查询到的数据放到各自list中,先遍历两 ...
- Python有趣现象（不定时更新）
1.list中extend方法有趣现象 1.1 List+=Str 与 List.extend(Str) list1 = [11,2,45] str1 = 'Michael' list1.extend ...
- MySQL 两个数据库表中合并数据
两个数据库表中合并数据 如果有 t1 和 t2 两个数据库表格,它们两个对应的字段是相同的.如何将 t2 的数据插入到t1中去呢? insert into t1 select * from t2 ...
- margin 依附与可见的内容，不能为margin而写margin
margin 依附于可见的内容,不能为margin而写margin <!DOCTYPE html><html><head><style> p{marg ...
- JAVA实现选择排序，插入排序，冒泡排序，以及两个有序数组的合并
一直到大四才开始写自己的第一篇博客,说来实在有点羞愧.今天写了关于排序的算法题,有插入排序,冒泡排序,选择排序,以下贴上用JAVA实现的代码: public class test5 { public ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
随机推荐
- 【原创】Windows服务管家婆之Service Control Manager
Service Control Manager,服务控制管理器,人称SCM就是它!在Windows内核中,都可以看到她忙碌的身影,可以说是系统服务和驱动的管家婆了! SCM管家婆起早贪黑,每次 ...
- MySQL 高性能优化实战总结
1 前言 2 优化的哲学 3 优化思路 3.1 优化什么 3.2 优化的范围有哪些 3.3 优化维度 4 优化工具有啥? 4.1 数据库层面 4.2 数据库层面问题解决思路 4.3 系统层面 4.4 ...
- Webpack编译结果浅析
如今Webpack已经是一个不可或缺的前端构建工具,借助这个构建工具,我们可以使用比较新的技术(浏览器不能直接支持)来开发. 你是否好奇你写的代码经过Webpack构建之后会生成什么东西?是否有时调试 ...
- netty源码解解析(4.0)-14 Channel NIO实现:读取数据
本章分析Nio Channel的数据读取功能的实现. Channel读取数据需要Channel和ChannelHandler配合使用,netty设计数据读取功能包括三个要素:Channel, Eve ...
- MySQL 索引与查询优化
本文介绍一些优化 MySQL 索引设计和查询的建议.在进行优化工作前,请务必了解MySQL EXPLAIN命令: 查看执行计划 索引 索引在逻辑上是指从索引列(关键字)到数据的映射,通过索引可以快速的 ...
- 五种IO模型透彻分析
1.基础 在引入IO模型前,先对io等待时某一段数据的"经历"做一番解释.如图: 当某个程序或已存在的进程/线程(后文将不加区分的只认为是进程)需要某段数据时,它只能在用户空间中属 ...
- [转]git图解（3）：分支操作
本文转自:https://www.jianshu.com/p/342a9f8db004 title_img.png git 的分支是它最明显的特性, 大部分人听别人推荐使用git都会听到“git分 ...
- C#面向对象之多态。
1.定义:指不同的对象收到相同的消息时,会产生不同的行为,同一个类在不同的场合下表现出不同的行为特征. 比如. class Program { //下面三各类都继承object,但不同类的tostri ...
- 44.Linux君正X1000-添加st7789v显示
由于板子LCD旧屏是ili9335型号的,旧屏有时候会断货,如果断货则使用一个st7789v型号的LCD 它们两个屏的区别在于初始化屏的参数不同,引脚都一样,也就是说需要使板子同时支持ili9335型 ...
- springMVC_02hello案例
1.导入jar包 commons-logging-1.1.1.jar jackson-annotations-2.5.4.jar jackson-core-2.5.4.jar jackson-data ...