九宫格布局是我们在网页开发中常用的布局之一，那么如何使用代码完成它呢？
设置垂直方向的padding撑开容器
1
2
3
4
5
6
7
8
9
10
11
12
| div.box {
width: 30%;
padding-bottom: 30%;
margin: 1%;
background-color: orange;
float: left;
border-radius: 5%;
}
div {
width: 100%;
padding-bottom: 30%;
}
|
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：
优点：简洁明了，且兼容性好
缺点：填充内容后会出现问题
viewport 使用vw单位
1
2
3
4
5
6
7
8
9
10
11
12
| div.box {
width: 30vw;
height: 30vw;
margin: 1vw;
background-color: orange;
float: left;
border-radius: 5%;
}
div {
width: 100vw;
height: 100vw;
}
|
优点：简洁方便
缺点：浏览器兼容不好
