HTML与CSS代码中div元素不显示问题排查求助

• 未设置宽高导致高度为0：你代码中所有div都没有指定宽高属性，空div默认高度由内部内容撑开，无内容且未手动设置高度时元素高度为0，即使设置了背景色也无法显示。
• 父容器高度塌陷：如果你给.boxinfo类设置了浮动、绝对定位等脱离文档流的属性，父容器#fullcontainer没有做清除浮动处理的话，也会出现高度为0无法显示的问题。
• HTML结构不规范：你提供的代码缺少<html>根标签包裹，style标签也没有放在<head>标签内，部分老旧浏览器可能会因为结构不规范导致样式解析失败。

修复示例代码 #

<!DOCTYPE html>
<html>
<head>
<style>
#fullcontainer {
  background: black;
  /* 根据需求设置宽高，以下示例为占满整个视口 */
  width: 100vw;
  height: 100vh;
}
.boxinfo {
  /* 给子元素设置基础样式，可按需调整 */
  width: 100px;
  height: 100px;
  background: #fff;
  margin: 15px;
}
</style>
</head>
<body>
  <div id="fullcontainer">
      <div class="boxinfo" id="box1"></div>
      <div class="boxinfo" id="box2"></div>
      <div class="boxinfo" id="box3"></div>
      <div class="boxinfo" id="box4"></div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Hissam