Parlons de plusieurs façons d'utiliser CSS pour réaliser la disposition de la grille à neuf carrés !

Cet article partagera avec vous plusieurs méthodes d'utilisation de CSS pour implémenter une disposition en grille à neuf carrés et présentera la différence entre le nième de type et le nième enfant. J'espère que cela sera utile à tout le monde !

Ces derniers jours, j'ai souvent vu une question sur la page "Mise en page en grille à neuf carrés". J'ai essayé plusieurs méthodes pour implémenter la disposition de la grille à neuf carrés, et j'ai découvert que cela impliquait beaucoup de connaissances en css, je l'ai donc enregistré. css 知识，记录一下。

我觉得这篇文章讲得很好，大家可以去参考一下大佬如何写边框九宫格！# 千万别小瞧九宫格 一道题就能让候选人原形毕露！

九宫格实现

下面几种实现方法都可自适应

基本布局和样式

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>

.box {
    background: #e4f7fd61;
    border: 2px solid #0786ada1;
    border-radius: 8px;
}

ul {
    padding: 0; 
    margin: 0;
}

.box li {
    list-style: none;
    text-align: center;
    line-height: 200px;
    background: skyblue;
    border-radius: 8px;
    font-size: 20px;
    color: black;
}

实现一：flex

使用 flex 布局实现需要注意一个点，就是需要用 flex-wrap 属性来使其换行。

.box {
    width: 100%;
    overflow: hidden;
}

ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.box li {
    width: 30%;
    height: 30%;
    margin-right: 5%;
    margin-bottom: 5%;
}

.box li:nth-of-type(3n) {
    margin-right: 0;
}

.box li:nth-of-type(n+7) {
    margin-bottom: 0;
}

实现二：float

使用 float 来实现需要注意一个点，浮动会造成浮动崩塌，因此可以设置 overflow: hidden; 把 box 设置成 BFC 来解决浮动崩塌。

.box {
    width: 100%;
    overflow: hidden;
}

ul {
    width: 100%;
    height: 100%;
}

.box li {
    width: 30%;
    height: 30%;
    margin-right: 5%;
    margin-bottom: 5%;
    float: left;
}

.box li:nth-of-type(3n) {
    margin-right: 0;
}

.box li:nth-of-type(n+7) {
    margin-bottom: 0;
}

实现三：grid

<div class="grid">
    <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>9</div>
</div>

box {
    background: #e4f7fd61;
    border: 2px solid #0786ada1;
    border-radius: 8px;
}

.grid {
    display: grid;
    width: 100%;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5%;
    grid-auto-flow: row;
}

.grid>div {
    list-style: none;
    text-align: center;
    line-height: 200px;
    background: skyblue;
    border-radius: 8px;
    font-size: 20px;
    color: black;
}

实现四：table

使用表格来实现会存在一些缺陷，table 单元格之间的间隔是使用 border-spacing 属性来实现的，且不支持百分比的形式，而且单元格四周都有类似于 margin 的外边距的效果。

<div class="box">
    <ul>
        <li>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </li>
    </ul>
</div>

.box {
    width: 100%;
    overflow: hidden;
}

ul {
    width: 100%;
    height: 100%;
    display: table;
    border-spacing: 10px;
}

.box li {
    display: table-row;
}

.box li div {
    display: table-cell;
    text-align: center;
    border-radius: 10px;
}

nth-of-type 与 nth-child 的区别

上面实现九宫格布局我用到了 nth-of-type 这个属性来实现最后一列的 margin-right: 0 和最后一行的 margin-bottom: 0。然后我记得 css 还有一个 nth-child 属性，这里顺便记录一下这两者的区别。

nth-of-type

MDN：:nth-of-type(n) 这个伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

从上图可以看出，因为 nth-of-type 他是当前元素的兄弟元素的第n个，所以 p:nth-of-type(4)是第四个 p 元素，即无论往中间添加什么元素，都只能是当前标签元素的第n个元素被选择。

nth-child

MDN：:nth-child(an+b)这个伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

nth-child 是当前元素的兄弟元素的第n个当前元素，即所有兄弟元素排序后的第n个当前标签元素。

从上图可以看出，nth-child 是当前元素的所有兄弟元素排序后的第n个当前标签元素，所以 p:nth-child(4) 取得是处于排在第4 位的 p

Je pense que cet article est très bien. Vous pouvez vous référer à la façon dont le maître écrit la grille des frontières ! # Ne le faites pas En sous-estimant Jiugongge, une question peut révéler les vraies couleurs du candidat !

Implémentation de Jiugongge

Les méthodes d'implémentation suivantes sont toutes adaptatives

Mise en page et style de baserrreeerrreee

Implémentation 1 : flex🎜🎜L'utilisation de flex pour l'implémentation de la mise en page doit prêter attention à un point, c'est-à-dire que vous devez utilisez l'attribut flex-wrap pour l'envelopper. 🎜rrreee🎜Implémentation 2 : float🎜🎜L'utilisation de float pour implémenter doit faire attention à un point, float Cela provoquera un effondrement du flotteur, vous pouvez donc définir overflow: Hidden; et box sur BFC pour résoudre l'effondrement du flotteur. 🎜rrreee🎜Troisième implémentation : grille🎜🎜🎜rrreeerrreee🎜Implémentation quatre : table🎜🎜Il y a quelques défauts dans l'utilisation des tableaux à implémenter. L'espacement entre les cellules table est obtenu à l'aide de l'attribut border-spacing. et ne prend pas en charge le format de pourcentage, et il existe des effets de marge similaires à la marge autour des cellules. 🎜🎜🎜rrreeerrreee🎜 La différence entre nth-of-type et nth-child🎜🎜J'ai utilisé l'attribut nth-of-type pour implémenter le margin-right: 0 et margin-bottom : 0 sur la dernière ligne. Ensuite, je me suis souvenu que css avait également un attribut nth-child. Au fait, je vais enregistrer la différence entre les deux. 🎜🎜énième de type🎜🎜MDN ::ntième de- type(n) Cette pseudo-classe est destinée aux balises qui ont un groupe de nœuds frères. Utilisez n pour filtrer les positions d'un groupe de nœuds frères. 🎜🎜🎜🎜🎜🎜Vous pouvez le voir à partir de l'image ci-dessus, on peut voir que parce que nth-of-type est le nième élément frère de l'élément actuel, donc p:nth-of-type(4) est le quatrième élément p, c'est-à-dire que quel que soit l'élément ajouté au milieu, seul le nième élément de l'élément label actuel peut être sélectionné. 🎜🎜énième-enfant🎜🎜MDN ::ntième-enfant(an+ b )Cette pseudo-classe recherche d'abord tous les éléments frères de l'élément courant, puis les trie par ordre de position à partir de 1. Le résultat sélectionné est la pseudo-classe CSS :nth-child L'expression (an+b ) entre parenthèses correspond à L'ensemble des éléments (n=0, 1, 2, 3...) 🎜🎜ntième-enfant est le nième élément courant des éléments frères de l'élément courant, qui c'est-à-dire le nième élément actuel après que tous les éléments frères et sœurs ont été triés n éléments de balise actuels. 🎜🎜🎜🎜🎜🎜Vous pouvez le voir à partir de l'image ci-dessus, on peut voir que nth-child est le nième élément de balise actuel une fois que tous les éléments frères de l'élément actuel ont été triés, donc p:nth-child(4) est obtenu dans le tri le 4 Élément <code>p. Si la 4ème position est constituée d'autres éléments du label, elle ne peut pas être obtenue, comme le montre la figure ci-dessous : 🎜🎜🎜🎜🎜Enfin🎜🎜Nous invitons tout le monde à communiquer dans la zone de commentaires et à progresser ensemble ! 🎜🎜(Partage de vidéos d'apprentissage : 🎜Tutoriel vidéo CSS🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!