Das CSS-Box-Modell mit Beispielen erklärt

Wenn Sie vorhaben, ein großartiges Webseiten-Layout zu erstellen, müssen Sie sich mit Rändern, Rahmen, Auffüllungen und Inhalten auskennen. Jedes Element im Webdesign, egal ob Bild oder Text, verwendet eine Box mit diesen Eigenschaften. Sie können ganz einfach komplexe Layouts erstellen, indem Sie mit dem Boxmodell herumspielen. In diesem Artikel sezieren wir das CSS-Box-Modell und zeigen Ihnen anhand praktischer Beispiele, wie Sie diese Eigenschaften verwenden.

Was ist das CSS-Box-Modell?

Das CSS-Box-Modell ist ein von der World Wide Web Konsortium. Es beschreibt alle Elemente in einem HTML-Dokument als rechteckige Kästchen mit eigenen Abmessungen. Diese Felder enthalten einen Inhaltsbereich und optional umgebende Rand-, Rahmen- und Füllbereiche. Sehen wir uns also die Teile einer CSS-Box an.

Lassen Sie uns die vier Schichten des CSS-Box-Modells aufdecken.

Erste Ebene: Inhalt

Der Inhaltsbereich enthält den Hauptinhalt des Elements, der ein Bild, Text oder jede Form von Medieninhalt sein kann. Sie können die Abmessungen von Elementen auf Blockebene ändern, indem Sie

Höhe und Breite Eigenschaften.

Zweite Schicht: Polsterung

Padding ist der Abstand zwischen dem Inhaltsfeld und seinem Rahmenfeld. Obwohl es als Leerraum um Ihren Inhalt herum angeordnet ist, können Sie eine Hintergrundfarbe verwenden, um den Unterschied zu visualisieren. Ihr könnt euch bewerben Polster-Oberseite, polster-rechts, Polster-Boden, und Polsterung-links Eigenschaften, um den Raum zu ändern.

Dritte Schicht: Rand

Der Rahmen umschließt den Inhalt und den Füllbereich. Sie können die Größe und den Stil des Rahmens ändern mit Rahmenbreite, Bordüre-Stil, und Randfarbe Eigenschaften.

Vierte Schicht: Rand

Die letzte Schicht des Boxmodells wird häufig verwendet, um Raum zwischen Elementen zu erzeugen. Der Rand umschließt den Inhalt, die Auffüllung und den Randbereich. Sie können verwenden Rand-oben,Rand-rechts, Rand-unten, und Rand-links Eigenschaften. Sie können der Margin-Eigenschaft auch einen negativen Wert zuweisen oder Auto um einige fantastische Platzierungstechniken zu erreichen.

Projekteinrichtung für CSS-Box-Modell

Lassen Sie uns ein Miniprojekt erstellen, um das grundlegende Boxmodell mit einer Inhaltsbox und Padding-, Rahmen- und Randeigenschaften zu demonstrieren. Sie können mit Text-, Bild- oder Medieninhalten arbeiten. Wir beginnen damit, dass es richtig strukturiert ist.

Struktur mit HTML

Ausgabe:

Sie können integrierte Funktionen Ihres Browsers verwenden, wie z Chrome-Entwicklertools, um zu sehen, was los ist. Wir verwenden zwei Bilder von Unsplash. Der Einfachheit halber blenden wir das Smartphone-Bild mit. aus Anzeige: keine; bis wir es später brauchen.

Styling mit CSS

/*************************
GRUNDSTYLING
*************************/
* {
Rand: 0px;
Füllung: 0px;
}
Karosserie {
Anzeige: flexibel;
Flex-Richtung: Reihe;
} 
.Anzeige {
Anzeige: keine !wichtig;
}

Lassen Sie uns nun unsere Inhaltsbox gestalten. Zuerst stellen wir die Höhe und Breite des Bildes. Außerdem hilft die Angabe einer Hintergrundfarbe bei der besseren Visualisierung. Also machen wir's.

/*************************
INHALTSBOX
*************************/
.inhaltsbox {
Anzeige: flexibel;
Flex-Richtung: Reihe;
rechtfertigen-Inhalt: Mitte;
Ausrichten-Elemente: Mitte;
/* Das Inhaltsfeld mit den Eigenschaften height und width gestalten */
Hintergrundfarbe: #fdf;
Höhe: 20em;
Breite: 30em;
}

Geben Sie Inhalten Raum zum Atmen mit Polsterung

Sie können entweder einstellen Polster-Oberseite, polster-rechts, Polster-Boden, und Polsterung-links Eigenschaften einzeln oder verwenden Sie die Abkürzung. Versuchen Sie, wenn möglich, die Kurzschrift zu verwenden, da Sie dadurch Zeit sparen können. Sehen wir uns an, wie die Polsterung funktioniert.

 /*************************
POLSTERUNG
*************************/
/* Auffüllen anwenden */
Polster-Oberseite: 5em;
Polsterung-rechts: 2em;
Polsterung-Boden: 8em;
Polsterung-links: 2em;
/* Auffüllen Kurzschrift */
/* oben/rechts/unten/links */
Polsterung: 5em 2em 8em 2em;
/* oben/horizontal/unten */
Polsterung: 5em 2em 8em;

Ausgabe:

Zeichnen Sie Linien um die Auffüllung mit Rahmen

Stellen Sie beim Anwenden der border-Eigenschaft sicher, dass Sie die Randfarbe -Eigenschaft, um dem Rahmen eine deutliche Farbe vom Hintergrund zu geben. Sie können die auswählen Bordüre-Stil entweder einzeln oder auf einmal, indem Sie die Abkürzungseigenschaft verwenden. Das gleiche gilt für die Rahmenbreite Eigentum.

Sie können auch die Grenzradius um der Box abgerundete Ecken mit einem Radius in. zu geben px, rem, em, oder Prozent.

 /*************************
GRENZE
*************************/
/* Rahmeneigenschaften anwenden */
/* Setze die Rahmenfarbe */
Rahmenfarbe: rgb (148, 234, 255);
/* Rahmenstil auswählen */
Bordüre-Top-Stil: solide;
border-right-style: gestrichelt;
Bordüre-Boden-Stil: Nut;
Bordüre-links-Stil: Grat;
/* Kurzform im Rahmenstil */
/* oben/rechts/unten/links */
Bordüre-Stil: durchgehender, gestrichelter Rillengrat;
/* Rahmenbreite einstellen */
Rand-Oberseiten-Breite: 4em;
Rahmen-Rechts-Breite: 2em;
Rand-Boden-Breite: 2em;
Rahmen-Links-Breite: 2em;
/* Rahmenbreitenkürzel*/
/* oben/rechts/unten/links */
Rahmenbreite: 4em 2em 2em 2em;
/* oben/horizontal/unten */
Randbreite: 4em 2em 2em;
/* Abkürzung der Grenzeigenschaft */
/* Rahmen: 4em festes RGB (148, 234, 255); */
/* Randradius setzen */
Randradius: 5em;
Randradius: 20%;

Ausgabe:

Platz zwischen Boxen mit Rand hinzufügen

Sie können eine Box horizontal zentrieren mit Rand: 0 automatisch, vorausgesetzt, es hat eine bestimmte Breite.

 /*************************
RAND
*************************/
/* Anwenden von Randeigenschaften */
Rand oben: 4em;
Rand-rechts: 5em;
Rand-unten: 3em;
Rand links: 5em;
/* Randkürzel */
/* oben/rechts/unten/links */
Rand: 4em 5em 3em 5em;
/* oben/horizontal/unten */
Rand: 4em 5em 3em;
/* Auto-Margin verwenden */
Rand: 3em automatisch;

Ausgabe:

Sie können die Eigenschaft margin mit einem, zwei, drei oder vier Werten angeben. Die Werte können eine Länge, ein Prozentsatz oder ein Schlüsselwort wie. sein Auto. Lassen Sie uns verstehen, wie es funktioniert:

• Wenn Sie nur einen Wert angeben, bedeutet dies, dass alle vier Seiten denselben Rand haben.
• Wenn Sie zwei Werte angeben, bedeutet der erste Wert Rand-oben und Rand-unten während der zweite Wert angibt Rand-rechts und Rand-links.
• Wenn Sie drei Werte angeben, gelten der erste und der letzte für Rand-oben und Rand-unten bzw. Der mittlere Wert gilt für den horizontalen Bereich, d. h. Rand-rechts und Rand-links.
• Wenn Sie alle vier Werte angeben, gelten sie jeweils für oben, rechts, unten und links (im Uhrzeigersinn).

Beachten Sie, dass Sie diese Tastenkombinationen auch für Auffüllungs- und Rahmeneigenschaften verwenden können.

Siehe auch: Der Spickzettel für wesentliche CSS3-Eigenschaften

Haben Sie schon einmal eine negative Marge verwendet? Um es zu visualisieren, lasst uns löschen Anzeige: keine um unser zweites Bild anzuzeigen, dann legen Sie einen negativen Rand fest.

/* .Anzeige {
Anzeige: keine !wichtig;
} */
.inhaltsbox {
Anzeige: flexibel;
Flex-Richtung: Reihe;
Ausrichten-Elemente: Mitte;
Hintergrundfarbe: #fdf;
Höhe: 20em;
Breite: 30em;
Polsterung: 5em 2em 8em;
Bordüre-Stil: durchgehender, gestrichelter Rillengrat;
Randbreite: 4em 2em 2em;
Randradius: 20%;
/* Negativen Rand verwenden */
Rand: 3em -20em 3em 5em;
}

Ausgabe:

Das Box-Modell: Erstellen einer pixelgenauen Website

Mit dem Boxmodell können Sie den Abstand zwischen Elementen definieren, Rahmen hinzufügen und ganz einfach ein komplex aussehendes Layout erstellen. Sie können sofort loslegen, um eine tolle Website zu erstellen. In der Zwischenzeit können Sie die Border-Box -Eigenschaft im Detail und spielen Sie mit dem obigen Code herum.

Sie sollten verstehen, dass es andere Methoden zum Anordnen von Inhalten in CSS gibt. Dazu gehören CSS Grid und CSS Flexbox. Sobald Sie mit dem Box-Modell vertraut sind, sollten Sie sich weiter mit diesen Alternativen vertraut machen.

CSS Flexbox-Tutorial: Die Grundlagen

Positionieren Sie Ihre HTML-Elemente mit Hilfe von CSS Flexbox perfekt.

Weiter lesen

Über den Autor