<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
.parent{
width: 500px;
height: 500px;
background-color: darkgray;
/*border: 1px solid;*/
/*padding-top: 1px;*/
/*margin-left: 10px;*/
/*margin-top: 150px;*/
}
.son{
width: 100px;
height:100PX;
}
.son1{
background-color: chartreuse;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.son2{
background-color: violet;
display: inline-block;
margin-left: 50px;
}
.son3{
background-color:red;
margin-top: 50px;
display: inline-block;
margin-bottom: 10px;
margin-right: 50px;
}
.son4{
background-color: aqua;
margin-top: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<!–margin 重叠问题 –>
<div class=”parent”>
<!–1. 同级元素之间重叠 –>
<!–1.1 水平方向 margin 重叠相加 –>
<!–<span class=”son1″>son11</span>–>
<!–<span class=”son2″>son12</span>–>
<!–1.2 垂直方向 margin 重叠取大值 –>
<!–<div class=”son son1″>son1</div>–>
<!–<div class=”son son2″>son2</div>–>
<!–<div class=”son son3″>son3</div>–>
<!–<div class=”son son4″>son4</div>–>
<!–1.3 解决垂直方向重叠问题 –>
<!–BFC–>
<!–float 的值不为 none–>
<!–overflow 的值不为 visible–>
<!–display 的值为 inline-block、table-cell、table-caption–>
<!–position 的值为 absolute 或 fixed–>
<!–2. 父子元素之间重叠 –>
<!–2.1 水平方向 margin 重叠 –>
<!–2.2 水平方向 margin 重叠 –>
<!–<div class=”son son4″></div>–>
<!–2.3 解决垂直方向重叠 –>
<!– 给父元素添加 padding-top 值 –>
<!– 给父元素添加 border 值 –>
<!–BFC–>
<!–3.margin 百分比 –>
<!– 普通元素的百分比 margin：都是相对于父元素的宽度计算的 –>
<!–4.margin 无效的情况 –>
<!–inline 水平元素的垂直 margin 无效 –>
<!–display: table-cell 的元素 margin 无效 –>
</div>
</body>
</html>“`