为什么打开时一片空白？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sky and lawn</title>
<style>
.container{
width:100%;
height:100%;
}
.sky{
width:100%;
height:60%;
background:linear-gradient(rgb(196, 228, 253),rgb(255,255,255));
}
.lawn{
width:100%;
height:40%;
background:linear-gradient(rgb(255,255,255),rgb(148,190,89));
}
</style>
</head>
<body>
<div class="container">
<div class="sky"></div>
<div class="lawn"></div>
</div>
</body>
</html>
正在回答
同学你好，关于同学的问题回答如下：
1、html的高度，在这里是浏览器可视范围的高度。即：
2、如果只设置body，不设置html的话：
html的高度是0：
是因为它并没有被实质性的内容撑开。
当只设置html，不设置body时：
html的高度是浏览器可视范围的高度的100%，而由于高度不会继承，body的高度就会为0：
所以要两个都设置，就是设置html的高度是浏览器可视窗口高度的100%，body又是html高度的100%，才会占据全屏。
同学再理解下。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星