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的heigh
t来调整的,要想找到一个能跟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也是可以的!