Lassen Sie uns über verschiedene Möglichkeiten sprechen, CSS zu verwenden, um das Neun-Quadrat-Raster-Layout zu realisieren!

In diesem Artikel werden verschiedene Methoden zur Verwendung von CSS zur Implementierung eines Neun-Quadrat-Raster-Layouts vorgestellt und der Unterschied zwischen n-ter-Typ und n-ter-Kind vorgestellt. Ich hoffe, dass er für alle hilfreich ist!

In den letzten Tagen habe ich oft eine Frage auf der Seite „Neunquadratisches Rasterlayout“ gesehen. Ich habe mehrere Methoden ausprobiert, um das Neun-Quadrat-Raster-Layout zu implementieren, und festgestellt, dass es eine Menge css-Kenntnisse erfordert, also habe ich es aufgezeichnet. 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

Ich finde diesen Artikel sehr gut. Sie können sich darauf beziehen, wie der Meister das Grenzgitter schreibt! # Nicht Wenn man Jiugongge unterschätzt, kann eine Frage das wahre Gesicht des Kandidaten offenbaren!

Neun-Quadrat-Raster-Implementierung

Die folgenden Implementierungsmethoden können adaptiv sein

Grundlegendes Layout und Stilrrreeerrreee

Implementierung 1: Flex🎜🎜Bei der Verwendung von flex für die Layoutimplementierung muss ein Punkt beachtet werden, nämlich Sie müssen das Attribut flex-wrap verwenden, um es zu umschließen. 🎜rrreee🎜Implementierung 2: float🎜🎜Bei der Verwendung von float zur Implementierung muss auf eines geachtet werden point, float Dies führt zum Zusammenbruch des Floats. Sie können also overflow: versteckt; und box auf BFC setzen, um den Float-Zusammenbruch zu beheben. 🎜rrreee🎜Implementierung drei: Raster🎜🎜🎜rrreeerrreee🎜Implementierung vier: Tabelle🎜🎜Es gibt einige Mängel bei der Verwendung von Tabellen zur Implementierung. Der Abstand zwischen table-Zellen wird mithilfe des Attributs border-spacing erreicht. und unterstützt kein Prozentformat, und es gibt Randeffekte ähnlich wie margin um die Zellen. 🎜🎜🎜rrreeerrreee🎜 Der Unterschied zwischen nth-of-type und nth-child🎜🎜Ich habe das Attribut nth-of-type verwendet, um die margin-right: 0 und margin-bottom: 0 in der letzten Zeile. Dann fiel mir ein, dass css auch ein nth-child-Attribut hat. Ich werde übrigens den Unterschied zwischen den beiden aufzeichnen. 🎜🎜nth-of-type🎜🎜MDN::nth-of- type(n) Diese Pseudoklasse ist für Tags, die eine Gruppe von Geschwisterknoten haben. Verwenden Sie n, um die Positionen einer Gruppe von Geschwisterknoten herauszufiltern. 🎜🎜🎜🎜🎜🎜Sie können es sehen Aus dem Bild oben ist ersichtlich, dass nth-of-type das n-te Geschwisterelement des aktuellen Elements ist, also p:nth-of-type(4) ist das vierte p-Element, d. h. unabhängig davon, welches Element in der Mitte hinzugefügt wird, kann nur das n-te Element des aktuellen Etikettenelements ausgewählt werden. 🎜🎜nth-child🎜🎜MDN::nth-child(an+ b )Diese Pseudoklasse findet zunächst alle Geschwisterelemente des aktuellen Elements und sortiert sie dann in Positionsreihenfolge beginnend bei 1. Das ausgewählte Ergebnis ist die CSS-Pseudoklasse:nth-child Der Ausdruck (an+b ) in den Klammern entspricht der Menge der Elemente (n=0, 1, 2, 3...) 🎜🎜nth-child ist das n-te aktuelle Element der Geschwisterelemente des aktuellen Elements ist das n-te aktuelle Element, nachdem alle Geschwisterelemente nach n aktuellen Tag-Elementen sortiert wurden. 🎜🎜🎜🎜🎜🎜Sie können es sehen Aus dem Bild oben ist ersichtlich, dass nth-child das n-te aktuelle Tag-Element ist, nachdem alle Geschwisterelemente des aktuellen Elements sortiert wurden, also p:nth-child(4) wird in der Sortierung am 4. erhalten <code>p-Element. Wenn es sich bei der vierten Position um andere Etikettenelemente handelt, kann sie nicht abgerufen werden, wie in der folgenden Abbildung gezeigt: 🎜🎜🎜🎜🎜Endlich🎜🎜Wir heißen alle herzlich willkommen, im Kommentarbereich gemeinsam zu kommunizieren und gemeinsam Fortschritte zu machen! 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über verschiedene Möglichkeiten sprechen, CSS zu verwenden, um das Neun-Quadrat-Raster-Layout zu realisieren!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!