破解 CSS 九宫格谜题：面试官考核神器

2023-09-20 13:58:03

导言

CSS 九宫格面试题是一个经典的面试问题，旨在评估应聘者的 CSS 功底。通过要求候选人使用 CSS 创建一个九个正方形单元格的网格，面试官可以检验候选人对布局、定位和尺寸的理解。

在本指南中，我们将探讨两种常见的方法来实现 CSS 九宫格：使用表格和 flexbox 布局。我们将逐步介绍每种方法，并提供示例代码和说明。

方法一：使用表格

表格是实现九宫格的传统方法，它提供了一种简单的结构来组织网格单元格。以下是使用表格创建九宫格的步骤：

HTML 代码：

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS 代码：

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid black;
  width: 33.33%;
  height: 33.33%;
}

方法二：使用 flexbox 布局

Flexbox 是一种现代布局系统，它提供了更大的灵活性并简化了复杂布局的创建。以下是使用 flexbox 布局创建九宫格的步骤：

HTML 代码：

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

CSS 代码：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.container div {
  flex: 1 1 0;
  border: 1px solid black;
  width: 33.33%;
  height: 33.33%;
}