CSS-i laiuse atribuut määrab elemendi sisuala laiuse. See ala on tühik elemendi äärise, polstri ja veerise vahel. Lisaks CSS-i laiuse atribuut väärtusega ' sobiv-sisu ” reguleerib elemendi laiust vastavalt sisule.
See uuring selgitab CSS-i laiuse atribuuti väärtusega fit-content.
Kuidas kasutada CSS-i laiuse atribuuti sobitussisu väärtusega?
CSS-i laiuse atribuudi kasutamiseks fit-content väärtusega vaadake antud süntaksit:
laius: sobiv-sisu
Näide
HTML-is lisage kolm sama klassinimega div elementi ' kasti ja kolm erinevat klassi värv - 1 ”, „ värv - 2 ”, ja „ värv - 3 ”, vastavalt. Veebilehele sisu lisamiseks lisage iga div sisse element
:
< div klass = 'kasti värv-1' >
< lk > CSS-i laiusega sobiv sisu lk >
div >
< div klass = 'kasti värv-2' >
< lk > Tere, Maailm ! lk >
div >
< div klass = 'kasti värv-3' >
< lk > Meeskonnatöö algab usalduse loomisest. Oleme meeskonnatöö jaoks ühine missioon. lk >
div >
Siin on HTML-koodi väljund:
Siiani oleme arutanud HTML-i lehte. Järgmises jaotises rakendame HTML-elementidele erinevaid CSS-i stiile, et need paremini välja näeksid. Käimasolevas näites kontrollime, kuidas laius 'vara, millel on väärtus' sobiv-sisu ” CSS-is.
Stiil “kasti” jaotus
.kast {laius: sobiv-sisu;
kõrgus: 50 pikslit;
värv: kummitusvalge;
polster: 6px;
veeris: 2px;
fondi suurus: 18 pikslit;
}
' .kast ” viitab div klassi kastile. Allpool on toodud atribuudid, mida sellele rakendatakse:
-
- “ laius ' vara väärtusega ' sobiv-sisu ” kasutab saadaolevat ruumi, kuid see ei ületa sisu.
- “ kõrgus ” on omadus, mis määrab elemendi kõrguse.
- “ värvi ” määrab elemendi fondi värvi.
- “ polsterdus ” atribuut loob ruumi elemendi piiri sees või sisu ümber.
- “ marginaal ” määrab ruumi elemendi ümber.
- “ fondi suurus ” atribuut määrab fondi suuruse.
Stiil “värv-1” jaotus
.värv- 1 {taustavärv: #00ABB3;
}
' taustavärv atribuut on seatud väärtusele .värv-1 ” div.
Stiil “värv-2” jaotus
.värv- 2 {taustavärv: #083AA9;
}
Stiil “värv-3” jaotus
taustavärv: #4C6793;
}
Võib täheldada, et elemendi laius on seatud sisuga võrdseks:
See on suurepärane! Oleme edukalt õppinud kasutama CSS-i laius ' vara väärtusega ' sobiv-sisu ”.
Järeldus
CSS-i laiuse atribuut võimaldab meil kasutada mitut väärtust. Need väärtused on protsentides, pikslites või rohkem. Selle sisu järgi seadistamiseks ' sobiv-sisu ” väärtust saab määrata. See postitus on kirjeldanud CSS-i laiuse atribuuti väärtusega fit-content koos praktilise demonstratsiooniga.