我仅使用html和ccs制作了一个简单的页面，它包含两个未在页面上呈现的彩色div块：页面上应该出现黄色和绿色的div，而应显示空白页面。 我检查了错误-浏览器未显示任何错误。
HTML：
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field"></div>
<div class="key" id="a key"></div>
</body>
</html>
CSS：
.field {
background-color:yellow;
}
.key {
background-color: green;
}
它们都在同一个文件夹中，包含html和css的文件名分别为index.html和styles.css。
添加一些padding或content
.field {
background-color:yellow;
padding:20px;
}
.key {
background-color: green;
padding:20px;
}<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field">test</div>
<div class="key" id="a key">test</div>
</body>
</html>,
divs为空，因此计算出的高度为0。
使用min-height或添加类似 的字符
因为它们为空。
<div class="field">text</div>
<div class="key" id="a key">text</div>
在其中放入一些东西，您会看到它们
,div是空的，即它们没有子级并且没有分配高度。如果您向div添加内容（例如图像或文本）或为它们提供某种height属性，您将看到它们。
,您没有任何尺寸。 像这样添加它们：
.field {
background-color:yellow;
height: 50px;
}
.key {
background-color: green;
height: 50px;
}
Div是一个块元素，当您使用它时，它会期望您提供一些内容。
您可以通过以下方式使div可见：
div{
min-height:27px;
}
.heights-a{
background-color:green;
}
.heights-b{
background-color:yellow;
}
.space-div{
background-color:orange;
}
.content-div{
background-color:white;
position:relative;
text-align:center;
}
.chakar{
border-radius:50%;
border:1px solid blue;
width:25px;
height:24px;
position:absolute;
left:44%;
top:0%
}<!-- Using Space-->
<div class="space-div"> </div>
<!-- Using Content-->
<div class="content-div">
<div class="chakar">
</div>
</div>
<!-- Using Height-->
<div class="heights-a"></div>
<div class="content-div"> INDIA!!!</div>
很高兴为您服务！！！！ ：）