Was ist das CSS-Box-Modell?

Das CSS-Box-Modell ist ein Denkmodell der CSS-Technologie, das häufig im Webdesign verwendet wird. Es wird auch als Box-Modell bezeichnet und besteht aus mehreren Elementen: Elementinhalt (Inhalt), Polsterung (Padding), Rand (Rand) und äußerer Rand (Margin) (wie in der folgenden Abbildung dargestellt).

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.

Das innerste Feld im Bild ist der eigentliche Inhalt des Elements, dh das Elementfeld. Neben dem Elementfeld befindet sich die innere Randpolsterung. gefolgt von Der Rand (Rand) und dann ist die äußerste Ebene der Rand (Margin), der das Boxmodell darstellt. Normalerweise ist der von uns festgelegte Hintergrundanzeigebereich der Bereich von Inhalt, Innenabstand und Rahmen. Der äußere Rand ist transparent und blockiert keine anderen umgebenden Elemente.

Dann ist die Gesamtbreite des Elementfelds = die Breite des Elements + der Wert des linken und rechten Rands der Polsterung + der Wert des linken und rechten Rands des Rands + der linke und rechte Breite des Rahmens;

Die Gesamthöhe des Elementfelds = die Höhe des Elements + der Wert des oberen und unteren Rands der Polsterung + der Wert des oberen und unteren Rands + der obere und untere Breite des Randes.

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!