Lastnost širine CSS določa širino področja vsebine elementa. To območje je prostor med obrobo, oblazinjenjem in robom elementa. Poleg tega lastnost širine CSS z vrednostjo ' fit-vsebina ” prilagodi širino elementa glede na vsebino.
Ta študija bo razložila lastnost širine CSS z vrednostjo fit-content.
Kako uporabiti lastnost širine CSS z vrednostjo fit-content?
Za uporabo lastnosti širine CSS z vrednostjo fit-content si oglejte dano sintakso:
širina: prileganje-vsebina
Primer
V HTML dodajte tri elemente div z istim imenom razreda ' škatla 'in trije različni razredi' barva-1 ”, “ barva-2 «, in » barva-3 «, oz. Dodajte element
v vsak div, da dodate vsebino na spletno stran:
< div razred = 'box color-1' >
< str > Vsebina za prilagajanje širini CSS str >
div >
< div razred = 'barva škatle-2' >
< str > Pozdravljen, svet ! str >
div >
< div razred = 'box color-3' >
< str > Timsko delo se začne z gradnjo zaupanja. Smo timsko delo za skupno poslanstvo. str >
div >
Tukaj je rezultat kode HTML:
Doslej smo razpravljali o strani HTML. Zdaj bomo v naslednjem razdelku uporabili različne sloge CSS za elemente HTML, da bodo videti bolje. V tekočem primeru bomo preverili vedenje » premer ' lastnina z vrednostjo ' fit-vsebina « v CSS.
Slog 'box' div
.škatla {širina: fit-vsebina;
višina: 50px;
barva: ghostwhite;
oblazinjenje: 6px;
rob: 2px;
velikost pisave: 18px;
}
' .škatla ” se nanaša na polje razreda div. Spodaj so lastnosti, ki se uporabljajo zanj:
-
- “ premer lastnost z vrednostjo fit-vsebina ” uporablja razpoložljivi prostor, vendar ne bo presegel vsebine.
- “ višina ” je lastnost, ki določa višino elementa.
- “ barva ” določa barvo pisave elementa.
- “ oblazinjenje ” ustvari prostor znotraj obrobe elementa ali okoli vsebine.
- “ marža ” določa prostor okoli elementa.
- “ velikost pisave Lastnost določa velikost pisave.
Slog 'barva-1' div
.color- 1 {Barva ozadja: #00ABB3;
}
' Barva ozadja lastnost je nastavljena na .barva-1 ” div.
Slog 'barva-2' div
.color- 2 {Barva ozadja: #083AA9;
}
Slog 'barva-3' div
Barva ozadja: #4C6793;
}
Opazimo lahko, da je širina elementa enaka vsebini:
To je super! Uspešno smo se naučili uporabljati CSS “ premer lastnost z vrednostjo fit-vsebina ”.
Zaključek
Lastnost širine CSS nam omogoča uporabo več vrednosti. Te vrednosti so v odstotkih, slikovnih pikah ali več. Če ga želite nastaviti glede na vsebino, » fit-vsebina ” lahko nastavite vrednost. Ta objava opisuje lastnost širine CSS z vrednostjo fit-content s praktičnim prikazom.