垂直外边距的重叠
在网页中相邻的垂直方向的外边距，会发生外边距的重叠
兄弟元素
兄弟元素之间的相邻外边距会取（绝对值）最大值，而不是取和，谁大取谁
特殊情况：如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取绝对值较大的
兄弟元素的外边距重叠，并对开发有利，不用处理
需求：将子元素移动到父元素的左下角
为上边的元素设置一个外边距box1
margin-bottom: 10px;为下边的元素设置一个外边距box2
margin-top: 10px;距离相隔10px
若距离设置为上边元素外边距为-20PX下边元素外边距是10PX则取10PX
如距离设置为上边元素外边距为-20PX下边元素外边距为-20PX则取20PX
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>D</title><style type="text/css">.box1{width: 100px;height: 100px;background-color: blueviolet;margin-bottom: -20px;}.box2{width: 100px;height: 100px;background-color: chartreuse;margin-top: -20px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>
