# 1.九宫格

## css实现正方形div

1、CSS3 vw 单位

> `vw` 相对于视窗的宽度：视窗宽度是 `100vw`

[视窗demo](http://www.zhangxinxu.com/study/201209/vw-vh-to-pixel.html)

对于宽度来说，视窗的宽度就是 `window.innerWidth`

注： `width: 1%;` 的是相对于父元素而言的。

```

div {

    width: 30%;

    height: 30vw;

    background-color: orange;

}

```

2、padding-bottom

```

div {

    width: 30%;

    padding-bottom: 30%;

    background-color: orange;

}

```

3、:after

这种方法我试了，虽然可以撑开，但是出来的不是正方形，是个长方形179.34x183.34，高度莫名其妙多了4px？？？？？

```

.wrap div {

    width: 30.5%;

    background-color: orange;

}

.wrap div:after {

    content: "";

    display: block;

    /* padding-bottom: 30.5%; or */

    margin-top: 100%;

}

```

## 实现九宫格排版

### 用div

```

# html

<div class="wrap">

    <!-- line 1 -->

    <div></div>

    <div></div>

    <div></div>

    <!-- line 2 -->

    <div></div>

    <div></div>

    <div></div>

    <!-- line 3 -->

    <div></div>

    <div></div>

    <div></div>

</div>

```

1、inline-block + 计算margin

计算起来也不是很麻烦，而且可以让中间的边只计算一次。

计算的时候，`3*方块宽度 + 4*边的宽度 = 100`，最后一条边的宽度计算在内，但实际用的时候并不指定，真正计算的是`3*方块宽度 + 3*边的宽度 = 100 - 一条边的宽度`，这样可以减少浮点数计算时的误差带来的可能存在的排版bug，因为最后一条边相当于留白自适应。

```

html, body{

    margin: 0;

}

.wrap {

    width: 100%;

}

.wrap div {

    display: inline-block;

    width: 30%;

    padding-bottom: 30%;

    margin: 2% 0 0 2%;

    background-color: orange;

    border-radius: 5%;

}

```

2、flex

这个方法，中间的边会比两边的厚，跟直接设置`margin: 1%;`的效果一样，中间会有两个边，从而变成2倍的margin。

```

html, body{

    margin: 0;

}

.wrap {

    width: 100%;    /* 这里用100%的话，需要把html和body的margin去掉，不然不是100vw；

                       用100vw的话，也要去掉，不然左右两边留边不对称。 */

    height: 100vw;

    display: flex;

    justify-content: space-around;

    align-content: space-around;

    flex-wrap: wrap;

}

.wrap div {

    width: 30%;

    padding-bottom: 30%;

    background-color: orange;

    border-radius: 5%;

}

```

### 据说还可以用table做

```

# 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>

```

table的话，本身是为了展现数据，虽然可以用来做布局，但是对于SEO并不友好。

```

# css

table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 10px; /* 不支持百分比 */

}

td {

    width: 30%;

    padding-bottom: 30%;

    background-color: orange;

    border-radius: 5%;

}

```

table这个方法其实和div没什么差别，顶多就是td之间不支持margin而用的border-spacing，或者也可以用border：

```

# css

table {

    width: 100%;

}

td {

    width: 30%;

    padding-bottom: 30%;

    background-color: orange;

    border: 5px solid #000; /* border-width不支持百分比 */

    border-collapse: collapse;

    border-radius: 5%;

}

```

这两种方法几乎效果上来看没什么差别，而且都不支持百分比的边框，所以不是很喜欢。

## 总结

最喜欢 padding-bottom + div + margin的方法