井字游戏 HTML CSS答案

【问题标题】：Tic Tac Toe HTML CSS井字游戏 HTML CSS
【发布时间】：2018-05-16 02:00:14
【问题描述】：

我试图用 React 创建一个基本的井字游戏（但这个问题只是关于 CSS）。

最初，我为网格编写了以下代码：

App.js：

import React, { Component } from 'react';
import Square from './Square';

class App extends Component {
  render() {
    return (
      <div>
        <div><Square /><Square /><Square /></div>
        <div><Square /><Square /><Square /></div>
        <div><Square /><Square /><Square /></div>
      </div>
    )
  }
}

export default App;

其中每个 Square 只是一个空的 div（因此我将在此省略 Square.js 代码），其样式如下：

{
  backgroundColor: "white",
  border: "black solid 2px",
  textAlign: "center",
  fontSize: "20px",
  width: "40px",
  height: "40px",
  margin: -1,
  display: "inline-block",
}

在渲染“X”、“O”和空字符串时，Square 会上下跳跃，如下所示：

然后我查阅了 React 官方教程的代码，他们以两种不同的方式来做：

在 Square 的 CSS 中，添加了“float: left”而不是我的“display: 内联块”
他们为每一行添加了另一个类“board-row”，即为每个环绕 3 个 Squares 的 div，具有以下 CSS：
```
.board-row:after{
      clear: both;
      content: "";
      display: block;
}
```
我的问题是：
为什么我的代码不起作用？
为什么新代码有效？

我确实有一些初步的想法：新代码让每一行的正方形向左浮动，然后它创建一个带有“clear: both”的空元素，它将空元素移动到浮动正方形下方，强制下一行广场去下面。（如果没有“clear: both”，所有 9 个方格都将位于同一行）。 "display: block" 还赋予了空元素推动方块的能力。

这有意义吗？我也很难解释原始代码有什么问题。

通常我不会在意，只要代码已经在工作，但我正在尝试教其他人 React，所以我希望能够向他们解释。

【问题讨论】：

标签： html css reactjs

【解决方案1】：

只需添加

verticalAlign: "top",

按照blog，初始样式就足够了。我以您的原始风格进行了尝试，并且有效。不用加.board-row:after

【讨论】：

天哪，太棒了！

【解决方案2】：

为什么新代码有效？ 因为它使用浮动属性来获得所需的布局。您试图通过使用"display: inline-block" 来达到同样的目的，这称为问题。我在这里找到了一个很好的解释：Why is this inline-block element pushed downward?

不过，您的解决方案并没有错，只需添加等于字体大小的 overflow: hidden 和 line-height 即可使文本垂直居中。你也错过了 "px" 在 margin 属性

.square {
  background-color: white;
  border: black solid 2px;
  text-align: center;
  font-size: 20px;
  width: 40px;
  height: 40px;
  margin: -1px;
  display: inline-block;
  overflow: hidden;
  line-height: 40px;
}

https://codepen.io/Yulia_pi/pen/bMxxOo?editors=1100

【讨论】：

"margin: -1" 之所以有效，是因为我在 JavaScript 中将其编写为样式对象，而不是 CSS。无论如何，谢谢你的解释！有时 HTML 和 CSS 中的细微差别会令人沮丧