So erstellen Sie eine flexible Box in CSS3

Manchmal müssen wir eine flexible Box in CSS3 schreiben. Wie erstellt man diesen Code? Dies erfordert die Verwendung unseres Box-Shadow-Attributs , das es der Box ermöglicht, bei der Anzeige einen Schatteneffekt zu erzeugen. Hier finden Sie eine detaillierte Erklärung zum Schreiben von

:

         box-shadow: Länge Länge Länge Farbe; 🎜>Der dritte Parameter stellt den Unschärferadius des Schattens dar

Der vierte Parameter stellt die Farbe des Schattens dar

Verwenden Sie Schatten auf den Elementen im Feld

Sie können Schatten individuell auf die Elemente im Feld Elemente verwenden Schatten anwenden.

Sie können die Auswahl für den ersten Buchstaben oder die Auswahl für die erste Zeile verwenden, um nur dem ersten Text oder der ersten Zeile den

Schatteneffekt

für die Tabelle

zuzuweisen

und Zellen mit Schatten

Sie können das Box-Shadow-Attribut verwenden, um einen Schatteneffekt auf der Tabelle und Zellen innerhalb der Tabelle zu erzeugen.

Geben Sie die Berechnungsmethode für die Breite und Höhe des Elements an Verwenden Sie in CSS3 das Box-Sizing-Attribut, um die Berechnungsmethode für die Breite und Höhe des Elements anzugeben

box- Sizing-Attribut

Verwenden Sie in CSS das width-Attribut und das height-Attribut, um die Breite und Höhe des Elements anzugeben.

Aber mit dem Box-Sizing-Attribut können Sie angeben, ob die Breiten- und

Höhenwerte, die mit dem Breiten-Attribut bzw. dem Höhen-Attribut angegeben werden, auch den Füllbereich innerhalb des Elements einschließen B. die Breite und Höhe des Randes.

Die Attributwerte, die für das Box-Sizing-Attribut angegeben werden können, sind der Content-Box-Attributwert und der Border-Box-Attributwert. Ersteres bedeutet, dass die Breite und Höhe des Elements den Innenpolsterbereich nicht einschließen, und die Breite und Höhe des Randes

. Letzteres bedeutet, dass die Breite und Höhe des Elements den Innenpolsterbereich einschließen sowie die Breite und Höhe des Randes.

Früher wurde standardmäßig der Attributwert „content-box“ verwendet.

Darüber hinaus können Sie den Attributwert

im Box-Sizing-Attribut als

padding

-box angeben, also die angegebene Breite und

Die Höhe des Inhalts umfasst die Breite und Höhe des Inhalts sowie die Breite und Höhe des inneren

Füllbereichs, mit Ausnahme der Breite und Höhe des seitlichen Felds

Wird verwendet, um die Gesamtbreite des Elements zu steuern. Wenn dieses Attribut nicht verwendet wird, ist der im Stil verwendete Standardwert

der Content-Box-Attributwert, der nur die Breite des Inhalts angibt, nicht jedoch die

Gesamtbreite des Elements.

In einigen Fällen wird die Verwendung des Attributwerts „border-box“ das

Seitenlayout

komfortabler machen.

Solange beispielsweise der Border-Box-Attributwert der beiden div-Elemente auf 50 % eingestellt ist, können Sie sicherstellen, dass die beiden div

-Elemente nebeneinander angezeigt werden. So erstellen Sie eine flexible Box. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So fügen Sie Bilder in HTML ein

Worauf sollten Sie beim Zentrieren von Divs in HTML achten

So verwenden Sie Kommentare in HTML

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine flexible Box in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!