Html Tic Tac趾板未出现在网页上

由于某些原因，我的css和html没有显示在网页上。它只显示Tic Tac Toe的h1标题。我已经写出了与我的家庭作业清单相匹配的代码，但我遗漏了一些东西，我已经开始了好几次，似乎无法得到我遗漏的东西。也许我把作业看错了

h1 {
  text-align: center;
}

.top {
  padding: 3em;
  float: left;
  height: 100px;
  width: 100px;
  border-bottom: 1px black solid;
}

.middle {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

.center {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;
}

.bottom {
  float: left;
  height: 100px;
  width: 100px;
  border-top: 1px black solid;
}

.row {
  clear: both;
  width: 302px;
  text-align: center;
}

HTML：
井字棋

您犯的基本错误是，不同的边框为这些元素生成不同的高度和宽度，因为1px边框添加到高度和宽度中，因此一些浮动元素将转到下一行，因为1px的垂直空间太小，无法容纳在同一行中，弄乱了预定的布局。（有些元件为102高，有些为101px）

但是如果添加

框大小：边框框

，边框宽度将包含在高度和宽度中，因此每个元素的实际大小将为100x100px，包括边框

这在我下面的片段中完成。边界显然仍然不正确，但修复这取决于您现在

*{
框大小：边框框；
}
h1{
文本对齐：居中；
}
.顶{
填充：3em；
浮动：左；
高度：100px；
宽度：100px；
边框底部：1px黑色实心；
}
.中{
浮动：左；
高度：100px；
宽度：100px；
边框顶部：1px黑色实心；
边框底部：1px黑色实心；
}
.中心{
浮动：左；
高度：100px；
宽度：100px；
边框顶部：1px黑色实心；
边框底部：1px黑色实心；
左边框：1px黑色实心；
右边框：1px黑色实心；
}
.底部{
浮动：左；
高度：100px；
宽度：100px；
边框顶部：1px黑色实心；
}
.行{
明确：两者皆有；
宽度：302px；
文本对齐：居中；
}

井字棋

在您的代码中，我注意到的第一件事是，您试图显示的项目中，每一个项目都比其容器宽，因此每一行上的三列溢出了行的总宽度，因此它们相互堆叠

尝试使用

框大小：边框框

重要的是：

这个家庭作业似乎有点过时了，因为它提供了一些技巧，可以用css以一种我们不再使用的方式构建电路板

float

属性实际上不是排列页面元素的最佳方式。由于该属性是很久以前创建的，当时的网站非常不同，基本上是文本和图像，它主要用于在文本块中排列图像。所以，如果你不完全了解它的工作原理，它有时会产生一些非常奇怪的结果

你可以尝试使用flexbox，一旦你学习并理解了它的基本原理，你的生活就会轻松多了！

使用flexbox，您可以执行以下操作：

div{
框大小：边框框；
}
.行{
显示器：flex；
证明内容：中心；
柔性包装：包装；
宽度：300px；
高度：100px；
背景颜色：灰色；
}
上校{
弹性：1；
利润率：10px；
背景颜色：蓝色；
}

井字棋

您应该努力减少内容，保留最相关的部分。。。没人想浪费20分钟看你的作业。。。而且你有打字错误，不需要点