⛽️第5期第6题:实现九宫格布局
Opened this issue · 0 comments
LinDaiDai commented
实现九宫格布局
实现效果如下:
先来看一下HTML
方面的代码:
<div id="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
还有一些item
上的基础css
代码:
#container {
/* css代码 */
}
.item {
font-size: 2em;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1 {
background-color: #ef342a;
}
.item-2 {
background-color: #f68f26;
}
.item-3 {
background-color: #4ba946;
}
.item-4 {
background-color: #0376c2;
}
.item-5 {
background-color: #c077af;
}
.item-6 {
background-color: #f8d29d;
}
.item-7 {
background-color: #b5a87f;
}
.item-8 {
background-color: #d0e4a9;
}
.item-9 {
background-color: #4dc7ec;
}
方案一:
第一种方案可以使用浮动+百分比:
#container {
width: 150px;
height: 150px;
}
.item {
float: left;
width: 33.33%;
height: 33.33%;
box-sizing: border-box;
font-size: 2em;
text-align: center;
border: 1px solid #e5e4e9;
}
方案二:
还可以使用flex
布局的方式:
#container {
width: 150px;
height: 150px;
display: flex;
flex-wrap: wrap;
}
.item {
width: 33.33%;
height: 33.33%;
box-sizing: border-box;
font-size: 2em;
text-align: center;
border: 1px solid #e5e4e9;
}
方案三:
另外的话,也许还可以试试grid
?
#container {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
.item {
font-size: 2em;
text-align: center;
border: 1px solid #e5e4e9;
}
答案参考:haizlin/fe-interview#2270
七、说说will-change
will-change
是CSS3
新增的标准属性,它的作用很单纯,就是"增强页面渲染性能"
,当我们在通过某些行为触发页面进行大面积绘制的时候,浏览器往往是没有准备,只能被动的使用CUP去计算和重绘,由于事先没有准备,对于一些复杂的渲染可能会出现掉帧、卡顿等情况。
而will-change
则是在真正的行为触发之前告诉浏览器可能要进行重绘了,相当于浏览器把CUP拉上了,能从容的面对接下来的变形。
常用的语法主要有:
whil-change: scroll-position;
即将开始滚动will-change: contents;
内容要动画或者变化了will-transform;
transform相关的属性要变化了(常用)
注意:
will-change
虽然可以开启加速,但是一定要适度使用- 开启加速的代价为手机的耗电量会增加
- 使用时遵循最小化影响原则,可以对伪元素开启加速,独立渲染
- 可以写在伪类中,例如
hover
中,这样移出元素的时候就会自动remove
掉will-change
了 - 如果使用
JS
添加了will-change
,注意要及时remove
掉,方式就是style.willChange = 'auto'