<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>“`
发表回复