Vlastnost CSS width definuje šířku oblasti obsahu prvku. Tato oblast je prostor mezi okrajem prvku, odsazením a okrajem. Navíc vlastnost width CSS s hodnotou „ fit-obsah ” upraví šířku prvku podle obsahu.
Tato studie vysvětlí vlastnost CSS width s hodnotou fit-content.
Jak používat vlastnost šířky CSS s hodnotou fit-content?
Chcete-li použít vlastnost width CSS s hodnotou fit-content, podívejte se na danou syntaxi:
šířka: fit-content
Příklad
V HTML přidejte tři prvky div se stejným názvem třídy “ krabice “ a tři různé třídy “ barva-1 “, “ barva-2 ', a ' barva-3 “, resp. Přidáním prvku
do každého prvku div přidáte obsah na webovou stránku:
< div třída = 'barva krabice-1' >
< p > CSS šířka přizpůsobit obsahu p >
div >
< div třída = 'barva krabice-2' >
< p > Ahoj světe ! p >
div >
< div třída = 'Barva krabice-3' >
< p > Týmová práce začíná budováním důvěry. Jsme tým, který pracuje pro společné poslání. p >
div >
Zde je výstup HTML kódu:
Dosud jsme diskutovali o HTML stránce. Nyní v další části použijeme různé styly CSS na prvky HTML, aby vypadaly lépe. V probíhajícím příkladu se podíváme na chování „ šířka 'nemovitost s hodnotou' fit-obsah “ v CSS.
Styl „box“ div
.krabice {šířka: fit-content;
výška: 50px;
barva: ghostwhite;
výplň: 6px;
okraj: 2px;
velikost písma: 18px;
}
' .krabice ” odkazuje na pole třídy div. Níže jsou uvedeny vlastnosti, které se na něj vztahují:
-
- “ šířka 'vlastnost s hodnotou' fit-obsah ” využívá dostupný prostor, ale nepřekročí obsah.
- “ výška “ je vlastnost, která určuje výšku prvku.
- “ barva “ definuje barvu písma prvku.
- “ vycpávka Vlastnost ” vytváří prostor uvnitř ohraničení prvku nebo kolem obsahu.
- “ okraj ” určuje prostor kolem prvku.
- “ velikost písma Vlastnost ” určuje velikost písma.
Styl „barva-1“ div
.barva- 1 {barva pozadí: #00ABB3;
}
' barva pozadí vlastnost je nastavena na hodnotu .barva-1 “div.
Styl „barva-2“ div
.barva- 2 {barva pozadí: #083AA9;
}
Styl „barva-3“ div
barva pozadí: #4C6793;
}
Lze pozorovat, že šířka prvku je nastavena stejně jako obsah:
To je skvělé! Úspěšně jsme se naučili používat CSS “ šířka 'vlastnost s hodnotou' fit-obsah “.
Závěr
Vlastnost CSS width nám umožňuje používat několik hodnot. Tyto hodnoty jsou v procentech, pixelech nebo více. Chcete-li jej nastavit podle obsahu, „ fit-obsah “ lze nastavit hodnotu. Tento příspěvek popsal vlastnost CSS width s hodnotou fit-content s praktickou ukázkou.