帮做钓鱼网站会怎样/直接下载app
P29-前端基础-CSS盒子外边距重叠
1.概述
垂直外边距的重叠（折叠）
相邻的垂直方向外边距会发生重叠现象
- 兄弟元素
- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
- 特殊情况：
- 如果相邻的外边距一正一负，则取两者的和
- 如果相邻的外边距都是负值，则取两者中绝对值较大的
- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
- 父子元素
- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理
2.外边距重叠
2.1.兄弟元素外边距重叠
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>外边距折叠</title><style>/* 垂直外边距的重叠（折叠）- 相邻的垂直方向外边距会发生重叠现象- 兄弟元素- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）- 特殊情况：如果相邻的外边距一正一负，则取两者的和如果相邻的外边距都是负值，则取两者中绝对值较大的- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理- 父子元素- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）- 父子外边距的折叠会影响到页面的布局，必须要进行处理*/.box1, .box2, .box3, .box4 {width: 200px;height: 200px;font-size: 100px;}/* 兄弟元素间的相邻垂直外边距重叠 */.box1 {background-color: #fba;margin-bottom: 100px;}.box2 {background-color: blue;}</style></head><body><!-- 兄弟元素 --><div class="box1"></div><div class="box2"></div><!-- 父子元素 --><div class="box3"><div class="box4"></div></div></body>
</html>
2.2.父子元素外边距重叠
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>外边距折叠</title><style>/* 垂直外边距的重叠（折叠）- 相邻的垂直方向外边距会发生重叠现象- 兄弟元素- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）- 特殊情况：如果相邻的外边距一正一负，则取两者的和如果相邻的外边距都是负值，则取两者中绝对值较大的- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理- 父子元素- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）- 父子外边距的折叠会影响到页面的布局，必须要进行处理*/.box1, .box2, .box3, .box4 {width: 200px;height: 200px;font-size: 100px;}/* 父子元素间的相邻垂直外边距重叠 */.box3 {background-color: chartreuse;}.box4 {background-color: darkorange;}</style></head><body><!-- 父子元素 --><div class="box3"><div class="box4"></div></div></body>
</html>
