Heim > Artikel > Web-Frontend > Ein Einführungs-Tutorial zum Erlernen des CSS-Layouts
Ein Einführungs-Tutorial zum Erlernen des CSS-Layouts
- 高洛峰Original
- 2017-03-17 09:33:371388Durchsuche
Überblick
Nach dem Aufkommen des Webs sind die Einführungs- und Lernmaterialien zu CSS überwältigend geworden.
Dieser Artikel behandelt keine spezifische CSS-Syntax, hofft jedoch, dass Menschen, die keinen oder nur wenig Kontakt mit CSS haben, aus der Perspektive eines Anfängers schnell verstehen können, was CSS ist und wie man es verwendet.
Was ist CSS?
Wenn Sie ein Konzept verstehen, sehen Sie als Erstes seinen Namen, und was oft ignoriert wird, ist auch sein Name.
CSS (Cascading Style Sheets) kann in chinesische Cascading Style Sheets übersetzt werden. Dies ist aus dem Namen ersichtlich:
Kaskadierung: Zeigt an, dass Stile gestapelt werden können, sodass Priorität besteht
Stylesheet: Zeigt an dass CSS ein Beschreibungsstil ist und nur eine Tabelle, keine Programmiersprache. Später, als CSS immer häufiger verwendet wurde, kamen Sprachen wie Sass und Less heraus, die die CSS-Syntax erweiterten
CSS-Funktion
Die Funktion von CSS ist Stil. Tatsächlich kann das Web nur mit HTML erstellt werden. Mit zunehmender Leistung von Maschinen und Browsern werden jedoch immer höhere Anforderungen gestellt Für die Schönheit und Benutzerfreundlichkeit von Webseiten ist CSS nach und nach deutlich geworden.
CSS hat meiner Meinung nach zwei Hauptfunktionen:
kann Webstile zur einfachen Änderung einheitlich verwalten, ähnlich wie Variablen in Programmiersprachen oder Konfigurationsdateien
Trennung von Webseiteninhalten und -stilen, sodass Inhalte flexibel dargestellt werden können
Beachten Sie, dass HTML der eigentliche Inhalt der Webseite ist, CSS Steuern Sie einfach, wie das HTML-Element angezeigt wird, ob es angezeigt werden soll oder nicht.
CSS fürLayout
CSS wird am häufigsten im Layout verwendet. Aufgrund von CSS gibt es in der Vergangenheit die sogenannte p+css-Layoutmethode Es wurde HTML verwendet. Alle sind Tabellenlayouts.
Um ein vorläufiges Verständnis des Layouts von p+css zu haben, reicht es meiner Meinung nach aus, drei Punkte zu verstehen: Rahmenmodell, Positionierung und Floating.
Box-Modell
Jedes p ist eine Box für CSS. Jede Box besteht von innen nach außen aus 4 Teilen PolsterungRand Rand
p der Breite dieser 4 Teile
Beispiel:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p>Content</p>
</body>
</html>
body {
background-color: #FAEBD7;
}
p {
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin: 10px;
background-color: red;
text-align: center;
}
Das Beispiel ist sehr einfach, aber man sieht:
Von außen nach innen sind sie sind Rand, Rahmen, Abstand, Inhalt
Die Breite und Höhe von p entsprechen lediglich der Größe des Inhalts
Positionierung
Nachdem Sie das Box-Modell verstanden haben, ist die Positionierung auch sehr einfach. Tatsächlich werden Boxen einzeln auf der Seite positioniert.
Die Positionierung wird in absolute Positionierung und relative Positionierung unterteilt.
Absolute Positionierung
Dies ist die absolute Position im Browser. Der Abstand relativ zur oberen linken Ecke des Browsers wird durch die oberen und linken Attribute festgelegt
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p id="p1">Content1</p>
<p id="p2">Content2</p>
</body>
</html>
body {
background-color: #FAEBD7;
}
p {
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid blue;
margin: 10px;
background-color: red;
text-align: center;
position: absolute;
}
#p1 {
top: 100px;
left: 100px;
}
#p2 {
top: 200px;
left: 200px;
}
Die absolute Positionierung ist klar, aber unflexibel. Sofern die Bildschirmgröße nicht festgelegt werden kann, sind mehrere CSS-Sätze erforderlich. Schlechte Einstellungen können dazu führen, dass sich Elemente überlappen.
Eine sehr wichtige Einstellung bei der absoluten Positionierung ist Position: absolut
Relative Positionierung
Bei der relativen Positionierung sind der obere und linke Teil jedes p nicht mehr relativ zur oberen linken Ecke des Browser. Aber die obere linke Ecke relativ zur restlichen Position.
Wie im obigen Beispiel ersetzen Sie position: absolute durch position: relative und Sie werden feststellen, dass sich die beiden ps nicht mehr überlappen.
Floating
p ist standardmäßig inline, d. h. jedes p belegt eine Zeile.
Wenn Sie beim Layout mehrere ps in einer Reihe anordnen möchten, verwenden Sie float (oder verwenden Sie die vorherige Tabellenmethode).
Nachdem Sie das p-Float-Attribut festgelegt haben, können Sie p verwenden, um verschiedene Strukturen anzuordnen .
Im Folgenden wird ein allgemeines Verwaltungssystem als Beispiel verwendet, um ein einfaches P + CSS-Layout zu erstellen
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p id="head">head</p>
<p id="middle">
<p id="nav">nav</p>
<p id="content">content</p>
</p>
<p id="foot">foot</p>
</body>
</html>
body {
background-color: #FAEBD7;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
border: 1px solid black;
text-align: center;
}
#head {
height: 50px;
width: 100%;
}
#middle {
width: 100%;
top: 50px;
bottom: 100px;
left: 0px;
position: absolute;
}
#nav {
float: left;
width: 200px;
height: 100%;
}
#content {
height: 100%;
overflow: hidden;
}
#foot {
height: 100px;
width: 100%;
bottom: 0px;
left: 0px;
position: absolute;
}
Im obigen Beispiel sind die Kopf- und Fußhöhen sowie die Navigationsbreite festgelegt ist behoben. Andere sind adaptiv und der Effekt kann durch Anpassen der Größe des Browserfensters beobachtet werden.
Zusammenfassung
Das CSS-Layout ist sehr einfach. Wenn es andere interaktive Aktionen gibt, kann dies über js erreicht werden (z. B. die Verknüpfung von Navigation und Inhalt).
Heutzutage verwendet fast niemand die Tabellenlayoutmethode, da die Tabelle nur eine Möglichkeit zum Anzeigen von Daten darstellt und die Zeilen- und Zellenmethoden nicht für die Komponentisierung geeignet sind.
Das obige ist der detaillierte Inhalt vonEin Einführungs-Tutorial zum Erlernen des CSS-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!