Tic Tac Toe游戏点击方块下移，填满整行复位的问题求助

嘿，我看到你遇到的方块偏移问题了，这其实是inline-block 元素默认垂直对齐方式导致的小坑！

问题原因 #

你的.col类用了display: inline-block，而这种元素默认的vertical-align值是baseline（基线对齐）。当方块是空的时候，它的基线和容器的基线对齐；一旦你插入了X这个大字体内容，元素的基线会跟着内容的基线走，就会导致方块向下偏移。当同一行三个方块都有X时，它们的基线又统一了，所以看起来又回到了初始位置。

另外我还发现你的JS里有个小细节问题：window.onload = init();是直接执行了init函数，把返回值（undefined）赋值给了事件，正确写法应该是把函数本身赋值过去，不然页面加载时就会立刻执行init，虽然这次没出问题，但规范写法更稳妥。

解决方案 #

1. 给.col添加vertical-align: middle（也可以选top/bottom，根据你想要的对齐效果），强制所有方块不管有没有内容，都保持相同的垂直对齐方式；
2. 修正window.onload的赋值方式。

修改后的完整代码 #

HTML（无需改动）

<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
  <div class='ctn'>
    <div class='row'>
      <p class='col'></p>
      <p class='col'>D</p>
      <p class='col'></p>
    </div>
    <div class='row'>
      <p class='col'></p>
      <p class='col'></p>
      <p class='col'></p>
    </div>
    <div class='row'>
      <p class='col'></p>
      <p class='col'></p>
      <p class='col'></p>
    </div>
  </div>
  <script type="text/javascript" src='./script.js'></script>
</body>
</html>

CSS（新增垂直对齐属性）

* {
  box-sizing: border-box;
  margin: 0;
}
.ctn {
  height: 300px;
  font-size: 0;
  padding: 7vh 0;
}
.row {
  position: relative;
  left: 50vw;
  transform: translate(-50%, 0);
  width: 300px;
  height: 100px;
  box-shadow: 0 0 1px #000;
}
.col {
  padding: 0;
  font: 800 64pt normal;
  width: 100px;
  height: 100px;
  display: inline-block;
  box-shadow: 0 0 1px #000;
  text-align: center;
  vertical-align: middle; /* 新增这一行 */
}

JS（修正事件绑定写法）

let init = () => {
  const [...boxes] = document.getElementsByClassName('col');
  let insert = (box, oper) => {
    box.innerHTML = 'X';
  };
  boxes.forEach(box => {
    box.addEventListener('click', event => {
      insert(event.target, 1);
    });
    box.innerHTML = '';
  });
};
window.onload = init; // 去掉括号，正确赋值函数引用

这样修改后，点击方块就不会出现偏移的问题了，JS的写法也更规范~

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