Question

我仅使用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。

Answer 1

添加一些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>

Answer 2

divs为空，因此计算出的高度为0。
使用min-height或添加类似 的字符

Answer 3

因为它们为空。

<div class="field">text</div>
<div class="key" id="a key">text</div>

在其中放入一些东西，您会看到它们

Answer 4

div是空的，即它们没有子级并且没有分配高度。如果您向div添加内容（例如图像或文本）或为它们提供某种height属性，您将看到它们。

Answer 5

您没有任何尺寸。像这样添加它们：

.field {
  background-color:yellow;
  height: 50px;
}

.key {
  background-color: green;
  height: 50px;
}

Answer 6

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">&nbsp; </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>

很高兴为您服务！！！！：）

为什么页面上没有div元素？

6 个答案: