CSS Box Model

Einführung

Willkommen zum CSS Box Model Lab! Im Webdesign kann jedes HTML-Element als eine Box betrachtet werden. Das CSS Box Model ist ein grundlegendes Konzept, das beschreibt, wie diese Boxen auf einer Webseite gerendert werden. Es besteht aus vier Hauptteilen: dem Inhaltsbereich (content area), dem Innenabstand (padding), dem Rahmen (border) und dem Außenabstand (margin).

In diesem Lab lernen Sie, wie Sie jede dieser Komponenten manipulieren können, um die Größe und den Abstand von Elementen zu steuern. Wir werden mit einer index.html-Datei und einer style.css-Datei arbeiten. Alle Ihre Änderungen werden in der style.css-Datei vorgenommen, und Sie können die Ergebnisse sofort sehen, indem Sie im LabEx-Interface zum Tab Web 8080 wechseln.

Legen wir los!

Setze die width-Eigenschaft auf ein div-Element

In diesem Schritt beginnen wir damit, die Größe des Inhaltsbereichs unseres Elements zu definieren. Die width-Eigenschaft in CSS legt die Breite der Inhaltsbox eines Elements fest. Die anderen Komponenten des Boxmodells (padding, border, margin) werden um diesen Inhaltsbereich herum hinzugefügt.

Suchen Sie zuerst die Datei style.css im Dateiexplorer auf der linken Seite der WebIDE. Klicken Sie darauf, um sie im Editor zu öffnen.

Fügen Sie nun die folgende CSS-Regel zur Datei style.css hinzu. Diese Regel zielt auf das div-Element mit der Klasse box ab und setzt seine Breite auf 300 Pixel.

.box {
  width: 300px;
}

Speichern Sie die Datei nach dem Hinzufügen des Codes (Strg+S oder Cmd+S). Um den Effekt zu sehen, klicken Sie auf den Tab Web 8080. Sie werden feststellen, dass der Text innerhalb der Box nun umgebrochen wird, um in einen 300 Pixel breiten Container zu passen.

Wende die padding-Eigenschaft mit einheitlichen Werten an

In diesem Schritt fügen wir etwas Abstand zwischen dem Inhalt und dem Rand des Elements hinzu. Dieser Abstand wird als padding bezeichnet. Die padding-Eigenschaft schafft einen Bereich um den Inhalt herum. Er befindet sich innerhalb des Rahmens des Elements.

Fügen wir unserer Box auf allen vier Seiten 20 Pixel padding hinzu. Ändern Sie die bestehende .box-Regel in Ihrer style.css-Datei, um die padding-Eigenschaft einzufügen.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue; /* Added for better visualization */
}

Wir haben auch eine background-color hinzugefügt, um den Inhalts- und Padding-Bereich besser sichtbar zu machen. Speichern Sie die Datei und wechseln Sie zum Tab Web 8080. Sie werden sehen, dass nun ein 20 Pixel breiter hellblauer Bereich den Textinhalt innerhalb der Box umgibt. Beachten Sie, dass die gesamte sichtbare Breite der Box zugenommen hat, da das Padding zusätzlich zur Breite des Inhalts hinzugefügt wird.

Verwende die border-Eigenschaft mit Stil, Breite und Farbe

In diesem Schritt fügen wir einen border (Rahmen) um das Padding und den Inhalt unseres Elements hinzu. Die border-Eigenschaft ist eine Kurzschreibweise, mit der Sie die Breite, den Stil und die Farbe des Rahmens auf einmal festlegen können.

Fügen wir einen durchgezogenen schwarzen Rahmen mit einer Breite von 2 Pixeln hinzu. Aktualisieren Sie die .box-Regel in Ihrer style.css-Datei wie unten gezeigt:

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
}

Die Werte für die border-Eigenschaft sind jeweils border-width (Rahmenbreite), border-style (Rahmenstil) und border-color (Rahmenfarbe).

Speichern Sie die Datei und aktualisieren Sie den Tab Web 8080. Sie sehen nun eine schwarze Linie, die um den Padding-Bereich der Box gezeichnet ist. Die Gesamtbreite des Elements hat sich erneut erhöht, um diesen neuen Rahmen aufzunehmen.

Implementiere die margin-Eigenschaft für Abstände

In diesem Schritt steuern wir den Bereich außerhalb des Rahmens des Elements. Dies geschieht mit der margin-Eigenschaft. Der Margin erzeugt leeren Raum um ein Element und schiebt andere Elemente davon weg.

Fügen wir unserer Box auf allen Seiten einen Margin von 50 Pixeln hinzu, um etwas Abstand zum <h1>-Element und zu den Rändern der Seite zu schaffen. Fügen Sie die margin-Eigenschaft zur .box-Regel in style.css hinzu.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
}

Speichern Sie die Datei und überprüfen Sie den Tab Web 8080. Sie werden feststellen, dass die gesamte Box nun vom <h1>-Element nach unten und vom linken Rand des Browserfensters weg verschoben ist. Dies zeigt, wie Margin verwendet wird, um den Abstand zwischen Elementen zu steuern.

Füge box-sizing: border-box hinzu, um Padding einzuschließen

In diesem Schritt werden wir eine gängige Layout-Herausforderung angehen. Standardmäßig gelten die width- und height-Eigenschaften eines Elements nur für die Inhaltsbox. Das Padding und der Rahmen werden darauf aufgeschlagen, was die Größenbestimmung unvorhersehbar machen kann. Für unsere Box beträgt die Gesamtbreite derzeit 300px (width) + 40px (links/rechts Padding) + 4px (links/rechts Rahmen) = 344px.

Um dies zu vereinfachen, können wir die box-sizing-Eigenschaft verwenden. Indem wir sie auf border-box setzen, weisen wir den Browser an, das Padding und den Rahmen in die Gesamtbreite und -höhe des Elements einzuschließen.

Fügen Sie die Eigenschaft box-sizing: border-box; zu Ihrer .box-Regel hinzu.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
  box-sizing: border-box;
}

Speichern Sie die Datei und betrachten Sie den Tab Web 8080. Sie werden sehen, dass die Box schrumpft. Nun beträgt die Gesamtbreite der Box, einschließlich Padding und Rahmen, genau 300 Pixel. Der Browser passt den Inhaltsbereich automatisch an. Dieses Verhalten ist für die Erstellung von Layouts wesentlich intuitiver.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben die Grundlagen des CSS Box Model erfolgreich erlernt.

In diesem Lab haben Sie geübt:

• Festlegen der width des Inhaltsbereichs eines Elements.
• Anwenden von padding, um Abstand zwischen Inhalt und Rahmen zu schaffen.
• Hinzufügen eines border um Padding und Inhalt.
• Verwenden von margin, um Abstand außerhalb des Rahmens des Elements zu schaffen.
• Nutzen von box-sizing: border-box für eine vorhersagbarere und intuitivere Elementgröße.

Das Verständnis des Box Model ist entscheidend für die Steuerung des Layouts und der Abstände von Elementen auf einer Webseite. Üben Sie diese Konzepte weiter, um CSS-Kenntnisse zu erlangen.