Detaillierte Erklärung der neuen CSS-Eigenschaft display:box

1. Anzeige:Box;

Wenn Sie diese Eigenschaft für ein Element festlegen, werden dessen untergeordnete Elemente auf derselben Ebene angeordnet, ähnlich wie bei „display:inline-block;“.

2. Die folgenden Eigenschaften können in den untergeordneten Elementen festgelegt werden

Voraussetzung: Um die folgenden Eigenschaften zu verwenden, müssen Sie display:box im übergeordneten Element festlegen.

1.box-flex:Zahl;

1) Anzahl der übergeordneten Elementbreiten

2) Wenn für ein untergeordnetes Element eine feste Breite festgelegt ist, verwendet das untergeordnete Element die feste Breite, und andere untergeordnete Elemente, für die keine feste Breite festgelegt ist, verwenden die verbleibende Breite des übergeordneten Elements (übergeordnetes Element – ​​Gesamtbreite aller untergeordneten Elemente mit fester Breite in Anzahl).

3) Wenn das untergeordnete Element einen Randwert hat, ist die verbleibende Breite (übergeordnete Breite - untergeordnete feste Gesamtbreite - Gesamtrandwert) nummerierte Teile

2.box-orient:horizontal/vertikal

Wenn Sie diese Eigenschaft für das übergeordnete Element festlegen, werden die untergeordneten Elemente horizontal oder vertikal angeordnet.

Hinweis: Nicht alle gängigen Browser unterstützen diese Eigenschaft und es muss ein Präfix hinzugefügt werden.

1) horizontale Anordnung, die Gesamtbreite der untergeordneten Elemente = die Breite des übergeordneten Elements. Wenn das übergeordnete Element eine feste Breite hat, ist die für das untergeordnete Element festgelegte Breite ungültig und das untergeordnete Element füllt die Breite des übergeordneten Elements aus.

2) Vertikale Anordnung, die Gesamthöhe der untergeordneten Elemente = die Höhe des übergeordneten Elements. Wenn das übergeordnete Element eine feste Größe hat, ist die für das untergeordnete Element festgelegte Größe ungültig und das untergeordnete Element nimmt die Größe des übergeordneten Elements ein.

3.Boxrichtung:normal/umgekehrt

Legen Sie diese Eigenschaft für das übergeordnete Element fest, um die Reihenfolge festzulegen, in der die untergeordneten Elemente sortiert werden.

1) normaler Standardwert, Kinder werden in HTML-Reihenfolge angeordnet

2) umgekehrt

4.box-align:Start/Ende/Mitte/Strecken

Legt die vertikale Ausrichtung des untergeordneten Elements auf der übergeordneten Ebene fest.

1) Beginnen Sie mit der vertikalen Ausrichtung oben

2) vertikale Ausrichtung unten beenden

3) vertikale Ausrichtung zentrieren

4) Stretch dehnt die Größe des Kindes aus, um sie der vom Elternteil festgelegten Größe anzupassen. Die Größe des Kindes ist ungültig.

5.box-pack:Start/Ende/Mitte

Legt die horizontale Ausrichtung des untergeordneten Elements auf der übergeordneten Ebene fest.

1) Beginnen Sie mit der horizontalen Linksausrichtung

2) Ende der horizontalen Rechtsausrichtung

3) Horizontale Ausrichtung zentrieren

Zusammenfassen

Oben ist das neue CSS-Attribut display:box, das ich Ihnen vorgestellt habe. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!