So verwenden Sie das neue CSS-Attribut display:box

Dieses Mal erkläre ich Ihnen, wie Sie das neue CSS-Attribut display:box verwenden und welche Vorsichtsmaßnahmen für die Verwendung des neuen CSS-Attributs display:box gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. display:box;

Legen Sie dieses Attribut für ein Element fest, um seine Nachkommen auf derselben Ebene anzuordnen, ähnlich wie display :inline -Block;.

2. Sie können die folgenden Attribute für seine Kinder festlegen

Voraussetzung: Um die folgenden Attribute verwenden zu können, muss display:box;

1.box-flex: number; andere Wortelemente, die keine feste Breite festlegen, verwenden die verbleibende übergeordnete Breite (übergeordnetes Element – ​​die Gesamtbreite der untergeordneten Elemente, die eine feste Breite haben). als Anteil der Zahl festlegen

　3) Wenn das untergeordnete Element einen Randwert hat, wird die Breite entsprechend der verbleibenden (übergeordnete Breite-untergeordnete feste Gesamtbreite-gesamter Randwert) Anzahl geteilt

　2.box-orient:horizontal/vertical

　 Legen Sie dieses Attribut für das übergeordnete Element fest. Die untergeordneten Elemente werden horizontal oder vertikal angeordnet.

Hinweis: Alle gängigen Browser unterstützen dieses Attribut nicht und müssen ihm vorangestellt werden.

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

2) vertikale Anordnung, die Gesamtgröße der Kinder = die Größe des Elternteils. Wenn das übergeordnete Element eine feste Höhe hat, ist die vom untergeordneten Element festgelegte Höhe ungültig und das untergeordnete Element füllt die Höhe des übergeordneten Elements aus.

　3.box-direction:normal/reverse

　 Legen Sie dieses Attribut für das übergeordnete Element fest, um die Reihenfolge der untergeordneten Elemente zu bestätigen.

1) normaler Standardwert, untergeordnete Elemente sind in HTML-Reihenfolge angeordnet

2) umgekehrte Reihenfolge

4.box-align:start/end/center/stretch

Einstellung im Elternteil, der vertikalen Ausrichtung der Kinder.

1) Beginn der vertikalen oberen Ausrichtung

2) Ende der vertikalen unteren Ausrichtung

3) Mitte der vertikalen Mittenausrichtung

4) Dehnung Dehnung der untergeordneten Höhe, im Einklang mit der vom Elternteil festgelegten Höhe. Die Körpergröße des Kindes ist ungültig.

　5.box-pack:start/end/center

　 Legen Sie im übergeordneten Element die horizontale Ausrichtung der untergeordneten Elemente fest.

1) horizontale Ausrichtung nach links beginnen

2) horizontale Ausrichtung nach rechts beenden

3) horizontale Ausrichtung in der Mitte zentrieren

Ich glaube, Sie haben gelesen Der Fall in diesem Artikel: Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So fügen Sie eine Banner-Schaltfläche in DW hinzu

Grundlegende Leistungsoptimierung von Front-End-Webseiten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das neue CSS-Attribut display:box. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!