Die CSS-Eigenschaft width definiert die Breite des Inhaltsbereichs des Elements. Dieser Bereich ist der Abstand zwischen Rand, Polsterung und Rand eines Elements. Außerdem ist die CSS-Eigenschaft width mit dem Wert „ fit-Inhalt ” passt die Breite des Elements an den Inhalt an.
Diese Studie erklärt die CSS-Eigenschaft width mit dem Wert fit-content.
Wie verwende ich die CSS-Eigenschaft width mit dem Wert fit-content?
Um die CSS-Breiteneigenschaft mit dem Fit-Content-Wert zu verwenden, sehen Sie sich die angegebene Syntax an:
Breite: fit-Inhalt
Beispiel
Fügen Sie in HTML drei div-Elemente mit demselben Klassennamen hinzu „ Kasten ” und drei verschiedene Klassen “ Farbe-1 “, „ Farbe-2 ', und ' Farbe-3 ', beziehungsweise. Fügen Sie in jedem div das Element
hinzu, um der Webseite Inhalt hinzuzufügen:
< div Klasse = 'box farbe-1' >
< p > CSS-Breite passender Inhalt p >
div >
< div Klasse = 'box farbe-2' >
< p > Hallo Welt ! p >
div >
< div Klasse = 'box farbe-3' >
< p > Teamarbeit beginnt mit dem Aufbau von Vertrauen. Wir sind ein Team, das arbeitet Pro ein gemeinsamer Auftrag. p >
div >
Hier ist die Ausgabe des HTML-Codes:
Bisher haben wir die HTML-Seite besprochen. Im nächsten Abschnitt wenden wir nun verschiedene CSS-Stile auf die HTML-Elemente an, damit sie besser aussehen. Im laufenden Beispiel werden wir das Verhalten von „ Breite „Eigentum mit dem Wert“ fit-Inhalt “ im CSS.
Stil „Box“ div
.Kasten {Breite: fit-Inhalt;
Höhe: 50px;
Farbe: Ghostwhite;
Polsterung: 6px;
Rand: 2px;
Schriftgröße: 18px;
}
Das ' .Kasten “ bezieht sich auf das div-Klassenfeld. Nachfolgend sind die Eigenschaften aufgeführt, die darauf angewendet werden:
-
- „ Breite „Eigenschaft mit dem Wert“ fit-Inhalt “ nutzt den verfügbaren Platz, überschreitet aber nicht den Inhalt.
- „ Höhe “ ist die Eigenschaft, die die Höhe des Elements bestimmt.
- „ Farbe “ definiert die Schriftfarbe des Elements.
- „ Polsterung ”-Eigenschaft erzeugt Platz innerhalb der Elementgrenze oder um den Inhalt herum.
- „ Gewinnspanne ” bestimmt den Abstand um das Element herum.
- „ Schriftgröße ”-Eigenschaft bestimmt die Schriftgröße.
Stil „Farbe-1“ div
.Farbe- 1 {Hintergrundfarbe: #00ABB3;
}
Das ' Hintergrundfarbe ” Eigenschaft ist auf die “ .farbe-1 ” div.
Stil „Farbe-2“ div
.Farbe- 2 {Hintergrundfarbe: #083AA9;
}
Stil „Farbe-3“ div
Hintergrundfarbe: #4C6793;
}
Es kann beobachtet werden, dass die Breite des Elements gleich dem Inhalt gesetzt wird:
Das ist klasse! Wir haben erfolgreich den Umgang mit dem CSS erlernt“ Breite „Eigenschaft mit dem Wert“ fit-Inhalt “.
Fazit
Die CSS-Breite-Eigenschaft ermöglicht es uns, mehrere Werte zu verwenden. Diese Werte sind in Prozent, Pixel oder mehr angegeben. Um es dem Inhalt entsprechend einzustellen, muss das „ fit-Inhalt ” Wert eingestellt werden. Dieser Beitrag hat die CSS-Eigenschaft width mit dem Wert fit-content mit einer praktischen Demonstration beschrieben.