通过CSS实现九宫格可以很好的考查候选人的CSS基本功，所以在当今的前端面试中，无论是大厂还是小厂，这个面试题经常出现在候选人面前，这道题目看似简单，但是最终能够做出来的人也是凤毛麟角，让我们来一探究竟吧。
方法一：使用table
table布局能够实现的原因在于table的tr和td能够将元素形成行列显示。table布局中有一个是否合并边框的样式border-collapse: collapse;值得我们注意。
HTML部分
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> 复制代码
CSS部分
* { margin: 0; padding: 0; } table { border-collapse: collapse; margin: 0 auto; } table td { width: 60px; height: 60px; background-color: blue; border: 1px solid #000; text-align: center; line-height: 60px;; } 复制代码
方法二：使用flex布局
使用flex布局的核心在于flex-wrap: wrap。
HTML部分
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> 复制代码
CSS部分
* { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } ul { display: flex; flex-wrap: wrap; width: 180px; height: 180px; } ul > li { background-color: blue; width: calc(100% / 3); height: 60px; line-height: 60px; border: 1px solid #000; text-align: center; } 复制代码
实现效果
