极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
background: olive;
position: relative;
width: 100%;
height: 100%;
}
/* 大小和颜色 */
.fa {
width: 70%;
height: 70%;
background:navy;
}
.son {
width: 50%;
height: 50%;
background: #999;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="fa center">
<div class="son center">
</div>
</div>
</body>
</html>style中的第一个为什么必须html,body{}，我只规定了body{},浏览器就不会显示子元素，只单单指定body为父元素不行吗？
因为你设定body的 “height: 100%;” 的时候，是参考他的父级（html）的高度，当你html没有设置内容高度的话，body的高度 = html的高度*100% ，当然body也没有高度了。由于你body里面的盒子宽高都用的百分比，所以都没有高度，就看不见了。