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

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

青灯夜游
青灯夜游nach vorne
2022-01-25 10:46:028528Durchsuche

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!

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

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 知识,记录一下。

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

九宫格实现

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

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

基本布局和样式

<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

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

<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 的外边距的效果。

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

<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 来筛选出在一组兄弟节点的位置。

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

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

从上图可以看出,因为 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个当前标签元素

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

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

从上图可以看出,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!

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

Neun-Quadrat-Raster-Implementierung

Die folgenden Implementierungsmethoden können adaptiv sein

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

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🎜🎜Lassen Sie uns über verschiedene Möglichkeiten sprechen, CSS zu verwenden, um das Neun-Quadrat-Raster-Layout zu realisieren!🎜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. 🎜🎜Lassen Sie uns über verschiedene Möglichkeiten sprechen, CSS zu verwenden, um das Neun-Quadrat-Raster-Layout zu realisieren!🎜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. 🎜🎜Lassen Sie uns über verschiedene Möglichkeiten sprechen, CSS zu verwenden, um das Neun-Quadrat-Raster-Layout zu realisieren!🎜🎜🎜🎜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. 🎜🎜Lassen Sie uns über verschiedene Möglichkeiten sprechen, CSS zu verwenden, um das Neun-Quadrat-Raster-Layout zu realisieren!🎜🎜🎜🎜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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen