css面试题手写九宫格

最新推荐文章于 2024-04-22 04:18:37 发布

十月在冬天

最新推荐文章于 2024-04-22 04:18:37 发布

阅读量518

点赞数

文章标签： 1024程序员节 css

本文链接：https://blog.csdn.net/Payne_liu/article/details/127495103

版权

经典面试题css九宫格今天就带大家回顾一下

1.felxBox

html

 <div class="my-item-wrap">
     <div class="my-item" v-for="item in 9">
         {{ item }}
     </div>
</div>

css

.my-item-wrap {
        display: flex;
        flex-wrap: wrap;

        /* 铺满父元素容器，这时候宽高就始终相等了 */
        .my-item {
            width: calc(98%/ 3);
            /* calc里面的运算符两边要空格 */
            height: calc(98%/ 3);
            margin-right: 1%;
            margin-bottom: 1%;
            overflow: hidden;

            flex-grow: 1;
            /* 子元素按1/n的比例进行拉伸 */
            background-color: #4d839c;
            text-align: center;
            color: #fff;
            font-size: 50px;
            line-height: 2;
        }

        .my-item:nth-of-type(3n) {
            /* 选择个数是3的倍数的元素 */
            margin-right: 0;
        }

        .my-item:nth-of-type(n+7) {
            /* 选择倒数的三个元素，n可以取0 */
            margin-bottom: 0;

        }
    }