[Java小工匠]CSS盒子模型-边距合并
1、CSS外边距合并
CSS外边距合并，只有上外边距和下外边距才会触发外边距合并，左外边距和右外边距不会。
2、相邻元素合并-上下
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻合并</title>
<style type="text/css">
.div{
width: 100px;
height: 100px;
background: red;
margin:100px;
}
</style>
</head>
<body>
<div class="div">div1</div>
<div class="div">div2</div>
</body>
</html>运行效果如下： div1和div2 根据盒子模型的计算规则，div1下边距100px和div2上边距100px，理论应该是200px。实际CSS规则是合并的，因此div1和div2 之间的距离为100px;如果div1的下边距和div2的上边距，边距值不一样，那么以最大的边距为最终取值。
image.png
3、父子元素合并-上下
源代码： ```
div2
运行结果： div2是div1的子元素，完全安装盒子模型，div2应当距离浏览器顶部100px+父元素100px =200px。因为上下边距合并，所以div2距离顶部100px；由于左右边距不合并，所以div2距离浏览器左边的距离是200px。
###4、Margin穿透问题
###4.1 Margin穿透效果演示
源代码：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin穿透问题</title>
<style type="text/css">
body{
margin: 0px;
}
.header{
height: 100px;
background: red;
}
.logo{
background: blue;
width: 60px;
height: 60px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
</div>
</body>
</html>远行结果：代码本意，header固定在浏览器顶部，当给logo的div添加上一个margin-top，header距离浏览器顶部由于父子元素合并所以出现了这个问题。
穿透
4.2 解决Margin穿透1-BFC
可以使用overflow:hidden,触发BFC模型解决这个问题，有专门章节介绍BFC模型。
4.3 解决Margin穿透2-插入元素
在父元素中，插入一个高度、宽度都是0px的隐藏元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin穿透问题</title>
<style type="text/css">
body{
margin: 0px;
}
.header{
height: 100px;
background: red;
}
.logo{
background: blue;
width: 60px;
height: 60px;
margin-top: 40px;
}
.before{
width: 0px;
height: 0px;
overflow: hidden;
visibility: hidden;
}
</style>
</head>
<body>
<div class="header">
<div class="before"></div>
<div class="logo"></div>
</div>
</body>
</html>4.4 解决Margin穿透3-:before
与插入元素的思路一致，使用伪元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin穿透问题</title>
<style type="text/css">
body{
margin: 0px;
}
.header{
height: 100px;
background: red;
}
.logo{
background: blue;
width: 60px;
height: 60px;
margin-top: 40px;
}
.header:before{
width: 0px;
height: 0px;
display: block;
content: 'clear';
overflow: hidden;
visibility: hidden;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
</div>
</body>
</html>5、空元素合并
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>空元素合并</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
}
.div2{
margin-top: 50px;
margin-bottom: 100px;
}
.div3{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>运行结果： div2 理论占据150px=上边距+下边距，实际占用了100px。因为空元素上下边距合并。如果div2的内容添加文字，显示效果将会有巨大差异。
image.png
6、左右不合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右不合并</title>
<style type="text/css">
.div1{
overflow: hidden;
}
.div11{
margin-right: 100px;
width: 200px;
height: 100px;
float: left;
border: 1px solid red;
}
.div12{
margin-left: 100px;
float: left;
width: 200px;
height: 100px;
border: 1px solid red;
}
.div2{
margin-top: 10px;
width: 602px;
border: 1px solid red;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div11">margin-right100px</div>
<div class="div12">margin-left100px</div>
</div>
<div class="div2">
200(div11宽度)+1px(div11右边框)+100px(div11右边距)+<br/>
200(div12宽度)+1px(div12左边框)+100px(div12左边距)<br/>
</div>
</body>
</html>运行效果：