表格布局实现九宫格布局

1. 表格布局

像这种横平竖直几行几列的布局，除了网格布局以外，表格布局也很合适，来看下语法：

运行结果：

可以看到在 DOM 结构上我们并没有用到

2. 小结

在有些适合使用表格布局但又不是表格的情况下，可以利用 display 属性来模仿表格的行为：

• display: table; 相当于把元素的行为变成 < table>；
• display: inline-table; 相当于把元素的行为变成行内元素版的 < table>；
• display: table-header-group; 相当于把元素的行为变成 < thead>；
• display: table-row-group; 相当于把元素的行为变成 < tbody>；
• display: table-footer-group; 相当于把元素的行为变成 < tfoot>；
• display: table-row; 相当于把元素的行为变成 < tr>；
• display: table-column-group; 相当于把元素的行为变成 < colgroup>；
• display: table-column; 相当于把元素的行为变成 < col>；
• display: table-cell; 相当于把元素的行为变成 < td> 或 .；
• display: table-caption; 相当于把元素的行为变成 < caption>。