#### 1、兄弟关系外间距塌陷问题
![1-元素并列](C:\Users\Administrator\Desktop\软件学院0711web\day07\2 笔记\1-元素并列.png)
```html
兄弟关系外间距塌陷问题
现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象;
两个值一样大,取当前值
两个值不同,取较大值
原因:并列关系的两个元素共用了一个外间距区域
解决办法:
分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden'
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
margin-bottom: 50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
}
.father1,
.father2 {
overflow: hidden;
}
<div class="father1">
<div class="box1"></div>
</div>
<div class="father2">
<div class="box2"></div>
</div>
```
#### 2、父子关系外间距塌陷
![2-元素嵌套](C:\Users\Administrator\Desktop\软件学院0711web\day07\2 笔记\2-元素嵌套.png)
```html
父子关系外间距塌陷
现象:
1.元素嵌套关系,子元素的margin-top值会叠加给父元素;
2.如果父元素也有margin-top值,会与子元素的margin-top值合并,取两者较大值;
原因:
父元素和子元素公用一个上外边距区域
解决方法:
1.为父元素设置上边框或者上填充
2.为父元素设置overflo:hidden;
3.转换思路,巧用padding,规避margin
.father {
width: 200px;
height: 200px;
background-color: tomato;
margin-top: 100px;
/* border-top: 2px solid royalblue;
padding-top: 1px; */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background: blue;
margin-top: 50px;
}
.father1 {
width: 200px;
height: 200px;
background-color: purple;
padding-top: 20px;
}
.son1 {
width: 100px;
height: 100px;
background: pink;
/* padding-top: 10px; */
}
<div class="father">
<div class="son"></div>
</div>
<hr>
<div class="father1">
<div class="son1"></div>
</div>
```
## 二、overflow详解
概述:溢出元素内容区的内容会如何处理
## 取值
overflow: visible;溢出显示,默认值
overflow: hidden;溢出隐藏
overflow: scroll;溢出显示滚动条,横向和纵向滚动条都显示
overflow: auto;自动,内容溢出时,显示滚动条
overflow-x 只包括水平方向。
overflow-y 只包括垂直方向
```html
body{
/* overflow:hidden ; */
/* overflow-x 只包括水平方向。
overflow-y 只包括垂直方向。 */
overflow-x: hidden;
overflow-x: visible;
overflow-x: scroll;
overflow-x: auto;
overflow-y: hidden;
overflow-y: visible;
overflow-y: scroll;
overflow-y: auto;
}
<img src="./images/yk.png" alt="">
```