⛽️第5期第6题：实现九宫格布局

[LinDaiDai]

实现九宫格布局

实现效果如下：

先来看一下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

#35

七、说说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'