Was bedeutet das CSS-Box-Modell?

CSS-Box-Modelle verfügen alle über Attribute wie Inhalt, Abstand, Rahmen und Rand. Diese Attribute können durch die Verwendung des im täglichen Leben üblichen Begriffs „Box“ als Metapher verstanden werden und werden daher Box-Modell genannt.

CSS (Cascading Style Sheet) kann als „Cascading Style Sheet“ oder „Cascading Style Sheet“ übersetzt werden. Es definiert, wie HTML-Elemente angezeigt werden und wird verwendet um das Erscheinungsbild der Webseite zu steuern. Durch die Verwendung von CSS zur Trennung von Inhalt und Darstellung der Seite wird die Arbeitseffizienz erheblich verbessert. CSS geht davon aus, dass alle HTML-Dokumentelemente eine rechteckige Elementbox generieren, die den vom Element im HTML-Dokumentlayout eingenommenen Platz beschreibt, der als Box visualisiert werden kann. CSS hat rund um diese Boxen ein „Box-Modell“-Konzept entwickelt, das die Leistung und Layoutstruktur jeder Box und sogar des gesamten HTML-Dokuments erheblich bereichern und verbessern kann. Für Elemente, die Boxen sind, belegen sie standardmäßig immer eine separate Zeile, und die Breite entspricht der Breite des Browserfensters. Die Elemente davor und danach, unabhängig davon, ob es sich um Boxen handelt oder nicht, können nur darüber oder darunter angeordnet werden, also kumulativ nach oben und unten angeordnet werden. Man kann sich vorstellen, dass jede Box in einem HTML-Dokument von innen nach außen aus vier Teilen besteht, nämlich Inhalt, Innenabstand, Rahmen und Rand. CSS definiert eine Reihe verwandter Eigenschaften für die vier Teile. Durch Festlegen dieser Eigenschaften können Sie die Leistung der Box verbessern.

Video-Tutorial-Empfehlung: „CSS-Tutorial-Sammlung – chinesische PHP-Website“

Box-Modell-Komposition

Inhaltsbereich (Inhalt)

Der Inhaltsbereich ist das Zentrum des Boxmodells. Er stellt den Hauptinformationsinhalt der Box dar, bei dem es sich um Text, Bilder usw. handeln kann. Der Inhaltsbereich verfügt über drei Eigenschaften: Breite, Höhe und Überlauf. Verwenden Sie die Attribute width und height, um die Höhe und Breite des Inhaltsbereichs der Box anzugeben. Wenn zu viele Inhaltsinformationen vorhanden sind und den Umfang des Inhaltsbereichs überschreiten, können Sie das Überlaufattribut verwenden, um die Verarbeitungsmethode anzugeben. Wenn der Überlaufattributwert ausgeblendet ist, ist der Überlaufteil nicht sichtbar; wenn er sichtbar ist, sind die Überlaufinhaltsinformationen sichtbar und werden nur außerhalb des Felds angezeigt. Beim Scrollen wird die Bildlaufleiste automatisch zum Feld hinzugefügt , und der Benutzer kann die Bildlaufleiste ziehen, um Inhaltsinformationen anzuzeigen. Wenn dies automatisch ist, entscheidet der Browser, wie mit dem Überlaufteil umgegangen wird.

Padding

Padding ist der Abstand zwischen dem Inhaltsbereich und dem Rand. Es gibt fünf Auffüllattribute, nämlich Auffüllen oben, Auffüllen unten, Auffüllen links, Auffüllen rechts und das schnelle Auffüllenattribut Auffüllen, das die oben genannten vier Richtungen kombiniert. Mit diesen fünf Attributen legen Sie den Abstand zwischen dem Informationsgehalt des Inhaltsbereichs und den Rändern in alle Richtungen fest. Wenn Sie die Eigenschaft „Box-Hintergrundfarbe“ festlegen, können Sie festlegen, dass die Hintergrundfarbe bis in den gefüllten Bereich reicht.

Rand

Der Rand ist die Grenze, die den Inhaltsbereich und die Polsterung umgibt. Zu den Eigenschaften des Rahmens gehören „Border-Style“, „Border-Width“ und „Border-Color“ sowie die Abkürzung „Border“-Eigenschaft „Border“, die die oben genannten drei Eigenschaften kombiniert. Das Attribut „border-style“ ist das wichtigste Attribut des Rahmens. Wenn der Rahmenstil nicht angegeben ist, werden andere Rahmenattribute ignoriert und der Rahmen ist nicht vorhanden. CSS spezifiziert neun Rahmenstile, darunter gepunktet (gepunktete Linie), gestrichelt (gepunktete Linie) und durchgezogen (durchgezogene Linie). Verwenden Sie das Attribut „border-width“, um die Breite des Rahmens anzugeben. Der Attributwert kann ein Längenmaßwert sein oder durch CSS angegeben werden. Verwenden Sie das Attribut „border-color“, um die entsprechende Farbe für den Rahmen anzugeben. Der Attributwert kann ein RGB-Wert oder die 17 von CSS angegebenen Farbnamen sein. Wenn Sie die oben genannten drei Rahmenattribute festlegen, können Sie entweder Schnelleinstellungen für die gesamten vier Richtungen des Rahmens vornehmen oder Sie können spezifische Einstellungen für die vier Richtungen vornehmen, z. B. Rand: 2 Pixel durchgehend grün oder Rand-Top-Stil: durchgehend, Rand-Links-Farbe: Rot usw. Wenn Sie das Attribut „Box-Hintergrundfarbe“ festlegen, erstreckt sich der Hintergrund im IE nicht bis zum Randbereich. In Standardbrowsern wie FF kann sich die Hintergrundfarbe jedoch bis zum Randbereich erstrecken, insbesondere wenn der einzelne Rand auf eine gepunktete Linie oder eingestellt ist Eine gepunktete Linie zeigt den Effekt.

Rand

Der Rand befindet sich am äußersten Rand der Box und ist der um die Außenseite des Randes hinzugefügte Raum. Leerzeichen verhindern, dass Boxen eng miteinander verbunden werden, und sind ein wichtiges Mittel für das CSS-Layout. Es gibt fünf Attribute des Randes, nämlich Rand oben, Rand unten, Rand links, Rand rechts, und das Verknüpfungsattribut Rand, das die oben genannten vier Richtungen kombiniert. Seine spezifischen Einstellungen und Verwendung ähneln dem Füllattribut. Bei zwei benachbarten (horizontal oder vertikal) Kästchen mit einem Wert für die leere Seite sind die leeren Seiten ihrer angrenzenden Teile nicht die Summe der beiden leeren Seiten, sondern die Vereinigung beider. Wenn die benachbarten leeren Randwerte der beiden nicht gleich groß sind, wird der größere Wert der beiden verwendet. Gleichzeitig ermöglicht CSS die Angabe negativer Werte für die Randeigenschaft. Wenn ein negativer Randwert angegeben wird, bewegt sich das gesamte Feld in die entgegengesetzte Richtung des angegebenen negativen Werts, wodurch ein überlappender Effekt der Felder entsteht . Elemente auf einer Webseite können durch die Angabe positiver und negativer Randwerte verschoben werden, was eine wichtige Methode in der CSS-Layout-Technologie ist.

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonWas bedeutet das CSS-Box-Modell?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!