CSS单标签实现复杂的棋盘布局

CSS单标签实现复杂的棋盘布局，可以使用:before和:after伪元素来实现。

关键CSS样式如下：

/* 容器样式 */
.container {
  display: flex;
  flex-wrap: wrap;
  width: 540px;
  height: 540px;
  margin: 0 auto;
}

/* 单格样式 */
.container:after,
.container:before {
  content: "";
  width: 60px;
  height: 60px;
  display: block;
  background: #eee;
}

/* 生成棋盘 */
.container:before {
  margin-right: -60px;
  margin-bottom: 60px;
}
.container:after {
  margin-left: -60px;
  margin-bottom: 60px;
}
.container:before,
.container:after {
  content: "";
  flex: 0 0 60px;
}

上述代码中，使用了.container类作为容器，设置了容器的基本样式，包括了一个:before伪元素和一个:after伪元素来实现棋盘。

为了让棋盘显示为正方形，我们指定每个单格为60px * 60px，并将:before和:after伪元素的宽度和高度也设置为60px * 60px。

接着我们用:before和:after伪元素来实现棋盘的左侧和顶部，这两个元素的样式和单格样式一样。我们通过设置:before伪元素的右侧间距为-60px，:after伪元素的左侧间距为-60px，来达到覆盖整个容器的效果。

最后，我们设置flex: 0 0 60px，使得棋盘能够在容器内填充整个空间。

下面是一个示例代码，生成了一个8 * 8的棋盘：

<div class="container"></div>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 480px;
    height: 480px;
    margin: 0 auto;
  }

  .container:after,
  .container:before {
    content: "";
    width: 60px;
    height: 60px;
    display: block;
    background: #eee;
  }

  /* generate the chessboard */
  .container:before {
    margin-right: -60px;
    margin-bottom: 60px;
  }
  .container:after {
    margin-left: -60px;
    margin-bottom: 60px;
  }

  .container:before,
  .container:after {
    content: "";
    flex: 0 0 60px;
  }

  .container div {
    flex: 0 0 60px;
    height: 60px;
    background: #444;
  }

  .container div.white {
    background: #eee;
    border: 1px solid #999;
    box-sizing: border-box;
  }

这里我们给单格添加了样式.white和.black，分别表示白色和黑色的单格。

再看另一个示例代码，生成了一个10 * 10的棋盘，并设置了不同的颜色样式：

<div class="container"></div>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
    margin: 0 auto;
  }

  .container:after,
  .container:before {
    content: "";
    width: 60px;
    height: 60px;
    display: block;
    background: #eee;
  }

  /* generate the chessboard */
  .container:before {
    margin-right: -60px;
    margin-bottom: 60px;
  }
  .container:after {
    margin-left: -60px;
    margin-bottom: 60px;
  }

  .container:before,
  .container:after {
    content: "";
    flex: 0 0 60px;
  }

  .container div {
    flex: 0 0 60px;
    height: 60px;
  }

  .container div.white {
    background: #fff;
    border: 1px solid #999;
    box-sizing: border-box;
  }

  .container div.black {
    background: #000;
    border: 1px solid #999;
    box-sizing: border-box;
  }

  .container div.red {
    background: #f00;
    border: 1px solid #999;
    box-sizing: border-box;
  }

  .container div.yellow {
    background: #ff0;
    border: 1px solid #999;
    box-sizing: border-box;
  }

这里我们给单格添加了样式.red、.yellow，.white和.black的样式保留，让不同的单格呈现不同的颜色。