Was ist das CSS-Box-Modell?

Das CSS-Box-Modell bezieht sich auf das „Box-Modell“, bei dem es sich im Wesentlichen um eine Box handelt, die die umgebenden HTML-Elemente einschließt. Alle HTML-Elemente können als Boxen betrachtet werden. und die Box-Modelle ermöglichen es uns, Elemente im Raum zwischen anderen Elementen und den Rändern des umgebenden Elements zu platzieren.

Häufig gehörte Attributnamen im Webdesign: Inhalt, Innenabstand, Rahmen, Rand, CSS. Das Boxmuster hat diese Eigenschaften.

Der Begriff „Box-Modell“ wird in Design und Layout verwendet.

Wir können diese Attribute verstehen, indem wir eine Metapher für eine alltägliche Sache im täglichen Leben verwenden – eine Box, daher nennen wir sie das Boxmuster.

Das CSS-Box-Modell ist ein Denkmodell der CSS-Technologie, das häufig im Webdesign verwendet wird.

Prinzip

Lassen Sie uns zunächst über unsere Webseiten sprechen: Inhalt, Polsterung, Rahmen, Rand, CSS. Das Boxmuster hat diese Eigenschaften.

Wir können diese Eigenschaften verstehen, indem wir sie auf die Kisten (Kisten) in unserem täglichen Leben übertragen. Die Kisten, die wir in unserem täglichen Leben sehen, sind auch Kisten, die Dinge enthalten können, also sind sie es namens It's Box-Modus.

Funktionen

Stellen Sie sich eine Box vor, sie hat vier: Rand-, Rand-, Polster- und Inhaltsattribute;

Schauen wir uns diese Box an hat vier Seiten: oben, unten, links und rechts, sodass jedes Attribut zusätzlich zum Inhalt vier Teile enthält: oben, unten, links und rechts Der Rand kann als der Abstand zwischen dem Inhalt des Felds und dem Rand verstanden werden. Der Rand ist in Dicke und Farbe unterteilt. Der Inhalt ist der Inhalt in der Mitte des Felds, und der äußere Rand ist der leere Raum, der automatisch draußen bleibt die Grenze.

Struktur

Inhalt (INHALT) ist das, was in der Box ist;

Und Polsterung (PADDING) ist die Angst vor dem, was in der Box ist (teurer () Schaumstoff oder anderes erdbebensicheres Zubehör wurde aufgrund von Beschädigungen hinzugefügt;

Der Rand (BORDER) ist die Box selbst; was den Rand (MARGIN) betrifft, bedeutet dies, dass die Boxen beim Platzieren platziert werden Es kann nicht alles zusammengestapelt werden und es muss ein gewisser Freiraum für die Belüftung, aber auch für die einfache Entnahme vorhanden sein. Im Webdesign bezieht sich der Inhalt häufig auf Text, Bilder und andere Elemente, es kann sich aber auch um kleine Boxen (DIV-verschachtelt) handeln. Im Gegensatz zu Boxen im wirklichen Leben können Dinge im wirklichen Leben im Allgemeinen nicht größer als Boxen sein, da die Box sonst gestreckt wird Zerbrochen, und die CSS-Box ist elastisch. Die Dinge im Inneren sind größer als die Box selbst und dehnen sie höchstens, aber sie werden nicht beschädigt.

Padding hat nur das Attribut width, jedes HTML-Tag kann als Box betrachtet werden

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