Der Implementierungseffekt ist wie folgt:
Definieren Sie zunächst die allgemeine HTML-Struktur:
<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>
//公共样式：
<style>
ul {
padding: 0;
}
li {
list-style: none;
text-align: center;
border-radius: 5px;
background: skyblue;
}
</style>
(1) Flex-Implementierung
Beim Neun-Quadrat-Raster-Layout fällt mir als Erstes das Flex-Layout ein. Es ist sehr einfach, das Neun-Quadrat-Raster im Flex-Layout zu implementieren. Sie müssen einen Flex-Wrap: Wrap; festlegen, um die Box zu erstellen einwickeln, wenn es Zeit zum Einwickeln ist.
Da wir für jedes Element den unteren und rechten Rand festlegen, erweitern der rechte Rand der letzten Spalte (3, 6, 9) und der untere Rand der letzten Zeile (7, 8, 9) ul, sodass der Typ lautet Hier werden Selektoren verwendet, um deren Einfluss zu eliminieren. Der endgültige Implementierungscode lautet wie folgt:
ul {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
li {
width: 30%;
height: 30%;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
(2) Netzimplementierung
Im Vergleich zum Flex-Layout lässt sich das Rasterlayout einfacher mit einem Neun-Quadrat-Raster implementieren. Sie müssen nur einige Eigenschaften festlegen:
ul {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 30% 30% 30%;
grid-template-rows: 30% 30% 30%;
grid-gap: 5%;
}
Das Attribut „grid-template-columns“ wird verwendet, um die Breite eines einzelnen Elements in jeder Zeile festzulegen, das Attribut „grid-template-rows“ wird verwendet, um die Höhe eines einzelnen Elements in jeder Spalte festzulegen, und das Attribut „grid-gap“ wird verwendet , um den Abstand zwischen den Feldern festzulegen.
(3) Float-Implementierung
Hier müssen Sie zunächst eine Breite für das Div des übergeordneten Elements festlegen. Der Breitenwert ist: **Boxbreite* 3 + Abstand* 2; **Dann legen Sie für jede Box eine feste Breite und Höhe fest. Um es zu erstellen Wrap, Sie können Float verwenden, um dies zu erreichen. Aufgrund des Floatings der untergeordneten Elemente wird ein BFC gebildet, sodass das übergeordnete Element ul overflow:hidden; verwendet, um die Auswirkungen des Floatings zu beseitigen. Der endgültige Implementierungscode lautet wie folgt:
ul {
width: 100%;
height: 100%;
overflow: hidden;
}
li {
float: left;
width: 30%;
height: 30%;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
(4) Inline-Block-Implementierung
Tatsächlich ist die Funktion von Inline-Block dieselbe wie die Funktion von Float oben. Sie werden beide zum Umschließen von Elementen verwendet. Der Implementierungscode lautet wie folgt:
ul {
width: 100%;
height: 100%;
letter-spacing: -10px;
}
li {
width: 30%;
height: 30%;
display: inline-block;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
Es ist zu beachten, dass es Lücken zwischen Elementen geben kann, die auf Inline-Block gesetzt sind, und die folgende Situation auftreten kann:
Um diesen Effekt zu beseitigen, wird hier das Attribut „letter-spacing“ verwendet, mit dem der Abstand zwischen Zeichen (Zeichenabstand) vergrößert oder verkleinert werden kann. Nach der Anwendung wurde es normal und hatte die erwartete Wirkung. Sie können auch die Schriftgröße „font-size: 0;“ für ul festlegen, um den Zeichenabstand zwischen den Feldern zu eliminieren:
ul {
font-size: 0;
}
(5) Tabellenimplementierung
<ul class="table">
<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>
Das Tabellenlayout ist nicht allzu schwierig. Stellen Sie zunächst das übergeordnete Element auf das Tabellenlayout ein, legen Sie dann mit border-spacing den Abstand zwischen den Zellen fest und legen Sie schließlich li auf die Tabellenzeile und div auf die Tabellenzelle fest. Das CSS Stil ist wie folgt:
.table {
width: 100%;
height: 100%;
display: table;
border-spacing: 10px;
}
li {
display: table-row;
}
div {
width: 30%;
height: 30%;
display: table-cell;
text-align: center;
border-radius: 5px;
background: skyblue;
}