css实现九宫格，但不一定有9个，可能有8个、7个，每两个格子间距是10px,一行放置3个格子，格子宽高比为1：2（最右的面试题）
<div class="box"><div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
首先我们使用flex实现九宫格
1.父元素使用flex布局，项目自动换行
.box {width: 100%;display: flex;flex-wrap: wrap;border: 1px solid yellow;background: green;}
2.然后设置宽高和边距
.box>div {width: calc((100% - 20px) / 3);height: calc((100% - 20px) / 3 * 2) ;margin-right: 10px;border: 1px solid red;}
3.使用伪类选择器把最右边元素的margin去掉
:nth-child(n)选择器的作用是匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。
.box :nth-child(3n) { // 第3个第6个第9个的右边距去掉margin-bottom: 0}
然后我们发现，宽高比1：2还没有不对呢，我上边所写的height也用calc去计算，想当然的也是用宽度去计算了，但是height:100%参考的父元素的高度呀，父元素高度是依靠子元素撑起来的，子元素高度又是由父元素计算的，这两个变成了相互依赖的关系，哈哈哈哈，我可真是个🐷脑子呢
那么宽高比1：2怎么实现呢，我们又不能使用js去动态的设置和获取，终极boss是使用padding来实现此功能
我们发现，宽度的自适应是根据viewport的width来调整的，比如我们设置的{width: 100%} {width: 50%}就是占浏览器可视区域的全部或者一半，resize之后也会自动调整
而height也是根据viewport的height来调整的，要想找到一个能跟width扯上关系的，就是padding了
因为Padding就是根据viewport的width来计算调整的（我也是今天刚知道……），哪怕是padding-top或者是padding-bottom都是这样，所以通过设置padding就能设置height
设置height为0，padding-bottom为width的值就是1：1，再* 2不就是1:2了吗
width: calc((100% - 20px) / 3);padding-bottom: calc((100% - 20px) / 3 * 2);
然后我们想要的效果它就实现咯~
窗口resize也是可以的！
