Vlastnosť CSS width definuje šírku oblasti obsahu prvku. Táto oblasť je priestor medzi okrajom prvku, výplňou a okrajom. Okrem toho vlastnosť šírka CSS s hodnotou „ fit-obsah ” upraví šírku prvku podľa obsahu.
Táto štúdia vysvetlí vlastnosť CSS width s hodnotou fit-content.
Ako používať vlastnosť šírky CSS s hodnotou fit-content?
Na účely použitia vlastnosti width CSS s hodnotou fit-content si pozrite danú syntax:
šírka: fit-obsah
Príklad
V HTML pridajte tri prvky div s rovnakým názvom triedy “ box “ a tri rôzne triedy “ farba-1 “, “ farba-2 “ a „ farba-3 “, resp. Ak chcete pridať obsah na webovú stránku, pridajte prvok
do každého prvku div:
< div trieda = 'farba krabice-1' >
< p > CSS šírka zodpovedá obsahu p >
div >
< div trieda = 'farba krabice-2' >
< p > Ahoj svet ! p >
div >
< div trieda = 'Farba krabice-3' >
< p > Tímová práca začína budovaním dôvery. Sme tím, ktorý pracuje pre spoločné poslanie. p >
div >
Tu je výstup HTML kódu:
Doteraz sme diskutovali o HTML stránke. Teraz v ďalšej časti použijeme na prvky HTML rôzne štýly CSS, aby vyzerali lepšie. V prebiehajúcom príklade skontrolujeme správanie „ šírka 'vlastnosť s hodnotou' fit-obsah “ v CSS.
Štýl „box“ div
.box {šírka: fit-content;
výška: 50px;
farba: ghostwhite;
výplň: 6px;
okraj: 2px;
veľkosť písma: 18px;
}
' .box “ odkazuje na pole triedy div. Nižšie sú uvedené vlastnosti, ktoré sa naň vzťahujú:
-
- “ šírka “vlastnosť s hodnotou” fit-obsah ” využíva dostupný priestor, ale nepresiahne obsah.
- “ výška “ je vlastnosť, ktorá určuje výšku prvku.
- “ farba “ definuje farbu písma prvku.
- “ vypchávka Vlastnosť ” vytvára priestor vo vnútri okraja prvku alebo okolo obsahu.
- “ marža “ určuje priestor okolo prvku.
- “ veľkosť písma ” určuje veľkosť písma.
Štýl „farba-1“ div
.farba- 1 {farba pozadia: #00ABB3;
}
' farba pozadia vlastnosť je nastavená na hodnotu .farba-1 ” div.
Štýl „farba-2“ div
.farba- 2 {farba pozadia: #083AA9;
}
Štýl „farba-3“ div
farba pozadia: #4C6793;
}
Dá sa pozorovať, že šírka prvku je nastavená rovnako ako obsah:
To je skvelé! Úspešne sme sa naučili používať CSS “ šírka “vlastnosť s hodnotou” fit-obsah “.
Záver
Vlastnosť CSS width nám umožňuje použiť niekoľko hodnôt. Tieto hodnoty sú v percentách, pixeloch alebo viac. Ak ho chcete nastaviť podľa obsahu, „ fit-obsah “ je možné nastaviť. Tento príspevok opísal vlastnosť CSS width s hodnotou fit-content s praktickou ukážkou.