(Lernvideo-Sharing: CSS-Video-Tutorial)
Das Rasterlayout kann Webseiten in Zeilen und Spalten mit einfachen Attributen unterteilen. Mithilfe der CSS-Seitenlayouttechnologie können wir Elemente in Webseiten aufnehmen und sie relativ zu steuern normaler Layoutfluss, umgebende Elemente, übergeordneter Container oder die Position des Hauptansichtsfensters/-fensters.
Holy Grail Layout
Holy Grail Layout ist ein dreispaltiges Layout mit fester Breite auf beiden Seiten und adaptiver Mitte:
css:
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
CSSHTML:
<body>
<div class="container">
<div class="cl main">
</div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</body>Das Prinzip von Holy G Schiene Das Layout soll als untergeordnetes Element fungieren. Legen Sie im schwebenden Zustand einen negativen Rand fest, und die untergeordneten Elemente überlappen die Geschwisterelemente.
Wenn man also den blauen Bereich noch einmal in drei Bereiche unterteilen möchte, gibt es meiner Meinung nach viele Möglichkeiten. Aber kann dies durch Verschachtelung erreicht werden? Wir können es versuchen:
 "161053501991527Sprechen Sie über das Rasterlayout in CSS (Grafiken und Text)")
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>Writing to Same Doc</title>
<style type="text/css">
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding: 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="cl main">
<div class="container">
<div class="cl main"></div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</body>
</html>Das Prinzip des Gittersystems
Annahme: Die Breite von Flowline ist W, die Breite von Column ist c, die Breite von Gutter ist g, die Breite von Der Rand ist m, die Breite des Gitters ist N
W = c*N + g*(N-1) + 2m; die Breite von g ist normalerweise doppelt so groß wie die von m, also:
W = (c+g) * N; setze c+ g wird als C aufgezeichnet, und wir erhalten:
W = C * N
Die meisten Gittersysteme sind Variationen dieser Formel.
Bootstraps Grid-System
Jetzt werfen wir einen Blick auf das Design gängiger Grid-Layouts und die Design-Implementierung in Bootstrap. Um das Rasterlayout in BootStrap ordnungsgemäß zu verwenden, müssen Spalten in Zeilen und Zeilen in Containern platziert werden. Die Containerklasse hat im Layout zwei Hauptfunktionen:
Breitenbeschränkungen in unterschiedlichen Breitenintervallen bereitstellen (responsive Haltepunkte). Wenn sich die Breite ändert, nehmen Sie eine andere Breite.
Sorgen Sie für einen Abstand, um zu verhindern, dass interne Inhalte die Browserränder berühren.
Padding wird in Bootstrap anstelle des oben erwähnten Rands verwendet. Die Größe beträgt 15 Pixel, wie im Bild unten gezeigt, und die rosa Farbe ist die Füllgröße.
Row ist ein Container mit Spalten. Die Summe der Spalten in jeder Zeile muss 12 betragen, wir können sie jedoch durch Verschachtelung erweitern. Der linke und rechte Rand von Row betragen -15 Pixel, was zum Versetzen der Polsterung im Container verwendet wird, wie im blauen Teil des Bildes unten gezeigt:
Dieses Design von Row dient hauptsächlich der Vereinfachung der Verschachtelung. was später erwähnt wird.
Spalte ist der Protagonist des Rastersystems. Der linke und rechte Abstand jeder Spalte beträgt 15 Pixel. Der negative Rand der Zeile oben gleicht den Abstand des Containers aus, sodass durch das Festlegen des Abstands für jede Spalte verhindert wird, dass sich der Inhalt direkt berührt Gleichzeitig gibt es zwischen den Spalten einen 30-Pixel-Kartensteckplatz (Gutter). Wie im gelben Teil des Bildes unten gezeigt:
Denken Sie nun über die oben genannte Formel nach: W = C * N;
Das oben erwähnte negative Randdesign der Zeile dient hauptsächlich der Verschachtelung es in Spalte Um Spalten zu verschachteln, müssen Sie zuerst die verschachtelte Spalte in die Zeile einfügen und die Zeile als Container in die Spalte einfügen, ohne einen Container zu platzieren. Wie in der folgenden Abbildung blau dargestellt, handelt es sich um den negativen Randbereich der in der Spalte platzierten Zeile.
Fügen Sie nun die verschachtelte Spalte in die Zeile ein, wie in der Abbildung unten gezeigt. Die obere Spalte fungiert als Container.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmieren lernen! !
Das obige ist der detaillierte Inhalt vonSprechen Sie über das Rasterlayout in CSS (Grafiken und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
 "161053503019160Sprechen Sie über das Rasterlayout in CSS (Grafiken und Text)")
 "161053503471393Sprechen Sie über das Rasterlayout in CSS (Grafiken und Text)")
 "161053504639161Sprechen Sie über das Rasterlayout in CSS (Grafiken und Text)")
 "161053505099187Sprechen Sie über das Rasterlayout in CSS (Grafiken und Text)")
 "161053505548471Sprechen Sie über das Rasterlayout in CSS (Grafiken und Text)")
 "161053506270611Sprechen Sie über das Rasterlayout in CSS (Grafiken und Text)")
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
