极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
border-top: 1px solid yellow;
}
div{
width: 50px;
height: 30px;
background-color: aqua;
border-top: 1px solid red;
}
p{
margin-top: 0px;
color: #FFFF00;
width: 50px;
background-color: red;
height: 20px;
}
h1{
height: 20px;
color: aquamarine;
font-size: 16px;
background-color: green;
}
</style>
</head>
<body>
<div>
<p></p>
<h1></h1>
</div>
<div style="background-color: blue;"></div>
</body>
</html>然后默认的 第一个div 会被子元素的p和h1 颜色覆盖 这是正常的,为什么随着p的margin-top越来越大, p和h1的背景会被第二个div的蓝色覆盖呢?难道第一个div 和第二个div 不是在同一标准流中?
div1和div2是两个不同的格式上下文,他们共同处于body这个格式上下文中
div的overflow的默认值是visible,所以p的margin加大时会越过div1的边界显示