CSS ist nicht schwer (Sie vermissen einfach diese Grundlagen) – Die Grundlagen beherrschen (Teil 2)-CSS-Tutorial-php.cn

Vielen Dank an alle für die Kommentare zum letzten Artikel, er bedeutet wirklich viel. Ich hoffe, dass Sie aus diesem Artikel das ein oder andere lernen.

In diesem Artikel untersuchen wir zwei grundlegende Konzepte in CSS – Positionierung und Layout. Positionierung und Layout sind von zentraler Bedeutung für die Erstellung optisch ansprechender und funktionaler Webseiten. Wenn Sie diese Konzepte beherrschen, können Sie ansprechende Designs erstellen, die das Benutzererlebnis verbessern. Am Ende wissen Sie, wie Sie diese Techniken nutzen, um Ihre Webseiten wie ein Profi zu strukturieren.

- Positionierung und Layout

CSS-Positionierung steuert, wie Elemente auf einer Webseite positioniert oder platziert werden. Die Positionierung wird gegebenenfalls durch die Versatzwerte „Oben“, „Unten“, „Links“ und „Rechts“ beeinflusst. Es gibt 5 Haupt-CSS-Positionswerte;

1. Statisch: Alle HTML-Elemente werden standardmäßig statisch positioniert. Dies bedeutet einfach, dass das Element unveränderlich ist und sich nicht bewegt und nicht von den Versatzwerten Oben, Unten, Links und Rechts beeinflusst wird.

2. Relativ:Elemente werden relativ zu ihrer normalen Position positioniert.

3. Absolut: Elemente werden relativ zu ihrem nächsten Vorfahren (übergeordneten Element) oder dem Ansichtsfenster positioniert.

4. Behoben: Elemente werden relativ zum Ansichtsfenster positioniert und bleiben beim Scrollen fixiert.

5. Sticky: Durch die Sticky-Positionierung kann ein Element basierend auf der Bildlaufposition und den Versatzwerten Oben, Unten, Links und Rechts zwischen relativen und festen Positionen wechseln.

Unten finden Sie eine Abbildung, die die CSS-Positionierung erklärt.

CSS Is Not Hard(You

Hier ist der Code, der dazu beigetragen hat, die Illustration zum Leben zu erwecken. Fühlen Sie sich frei, es selbst zu kopieren und zu ändern.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

Nach dem Login kopieren

— Halten Sie inne, atmen Sie tief ein und fahren Sie dann fort!!—
- CSS-Layout

1. Flexbox: Dies ist eine eindimensionale Layoutmethode, die zum Anordnen von Elementen in einer einzigen Achse (horizontal und vertikal) verwendet wird.

Funktionen einer Flexbox

display: flex – Dadurch wird eine Flexbox für den Container erstellt.
align-items: center – Dies steuert die vertikale Ausrichtung des Containers.
justify-content: space-between – Dies steuert die horizontale Ausrichtung des Containers.
Lücke: Fügt Abstand zwischen flexiblen Elementen hinzu, ohne dass Ränder erforderlich sind.

Hier ist das Vorher und Nachher einer einfachen Navigationsleiste

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar using CSS Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

Nach dem Login kopieren

Ergebnis:

CSS Is Not Hard(You

2. Raster: Dies ist eine zweidimensionale Layoutmethode, die zum Erstellen von Zeilen und Spalten verwendet wird.

Funktionen

display: Grid – Dies erstellt ein Raster für den Container.
Grid-Template-Columns/Grid-Template-Rows – Dies definiert eine Zeile oder Spalte für den Container.
wiederholen(2, 1fr) – Dies erstellt 2 Spalten gleicher Breite.
Lücke: 10 Pixel – Fügt Abstand zwischen Rasterelementen hinzu.

Hier ist ein Vorher und Nachher einiger Katzenfotos, die ich auf Unsplash gefunden habe.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

Nach dem Login kopieren

Ergebnis:

CSS Is Not Hard(You

Vergleichstabelle

Feature	Flexbox	Grid
Axis	One-dimensional	Two-dimensional
Alignment	Horizontal/Vertical	Rows and columns
Best for	Navigation Bars	Layouts like dashboards
Flexibility	Better for small components	Better for page layouts

Positionierung und Layout sind die Grundlage von CSS. Wenn Sie wissen, wann und wie Sie sie verwenden, wird Ihr Styling-Erlebnis nicht nur einfacher, sondern auch angenehmer und effizienter. Während dieser Artikel Ihnen den Einstieg in Flexbox und Grid erleichtert, werde ich bald eine ausführlichere Anleitung veröffentlichen, in der die erweiterten Funktionen, Tipps und Tricks erläutert werden. Seien Sie gespannt!

Und das ist ein Abschluss von CSS-Grundlagen beherrschen! Ich hoffe, dass Ihnen das Lesen genauso viel Spaß gemacht hat wie mir das Schreiben. Aber bevor sich unsere Wege trennen, würde ich gerne von Ihnen hören:

Welche CSS-Layoutmethode bevorzugen Sie für Ihre Projekte – Flexbox oder Grid? Und warum?

Teilen Sie Ihre Gedanken gerne unten in den Kommentaren mit.

Auf Wiedersehen!!!!

Das obige ist der detaillierte Inhalt vonCSS ist nicht schwer (Sie vermissen einfach diese Grundlagen) – Die Grundlagen beherrschen (Teil 2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!