KingのNote

九宫格拼凑

9/5/2023 样式效果

# 重点

对于九宫格（从左到右、从上到下进行编号, 编号从1开始），，我们当然可以一个一个给子盒子设置样式，但是这样效率太低，我们可以使用子选择器（编号从0开始，1、2、3...）：

  • 对于每一列的盒子，我们可以指定子选择器下标为： 3n + 1（第一行）、3n + 2（第二行）、3n（第三行）
  • 对于每一行的盒子，我们可以指定子选择器小标为： -n + 9（前面9个元素）、 -n + 6（前面6个元素）、-n + 3（前面三个元素），每一次覆盖了前面的3n个元素

# 代码


<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        width: 500px;
        margin: 200px auto 0;
        display: flex;
        flex-wrap: wrap;
    }

    .item {
        width: 150px;
        height: 150px;
        flex-shrink: 0;
        background: url("https://i03piccdn.sogoucdn.com/21c96a03352dbd7d");
        background-size: 450px 450px;
        position: relative;
    }

    .item:nth-child(3n+1) {
        background-position-x: 0;
        left: -20px;
    }

    .item:nth-child(3n + 2) {
        background-position-x: -150px;
        left: 0;
    }

    .item:nth-child(3n) {
        background-position-x: -300px;
        left: 20px;
    }

    .item:nth-child(-n+9) {
        top: 20px;
        background-position-y: -300px;
    }

    .item:nth-child(-n + 6) {
        top: 0;
        background-position-y: -150px;
    }

    .item:nth-child(-n + 3) {
        background-position-y: 0;
        top: -20px;
    }

    .box:hover .item {
        left: 0;
        top: 0;
        transition: all 0.5s;
    }

</style>

<body>
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

flex两栏布局