A CSS width tulajdonság határozza meg az elem tartalmi területének szélességét. Ez a terület az elem szegélye, kitöltése és margója közötti tér. Ezenkívül a CSS width tulajdonság a ' fit-tartalom ” beállítja az elem szélességét a tartalomnak megfelelően.
Ez a tanulmány a CSS-szélesség tulajdonságot a fit-content értékkel magyarázza.
Hogyan használjuk a CSS-szélesség tulajdonságot illeszkedő tartalom értékkel?
A CSS width tulajdonság fit-content értékkel való használatához nézze meg a megadott szintaxist:
szélesség: illeszkedés-tartalom
Példa
HTML-ben adjon hozzá három div elemet azonos osztálynévvel ' doboz 'és három különböző osztály' szín-1 ”, „ szín-2 ”, és „ szín-3 ”, ill. Adjon hozzá
elemet minden div-hez, hogy tartalmat adjon a weboldalhoz:
< div osztály = 'box color-1' >
< p > CSS szélességhez illeszkedő tartalom p >
div >
< div osztály = 'doboz színe-2' >
< p > Helló Világ ! p >
div >
< div osztály = 'doboz színe-3' >
< p > A csapatmunka a bizalom kiépítésével kezdődik. Csapatban dolgozunk számára közös küldetés. p >
div >
Íme a HTML-kód kimenete:
Eddig a HTML oldalról beszéltünk. Most, a következő részben különböző CSS-stílusokat fogunk alkalmazni a HTML-elemekre, hogy jobban nézzenek ki. A folyamatban lévő példában megvizsgáljuk a „ szélesség 'értékkel rendelkező ingatlan' fit-tartalom ” a CSS-ben.
Stílus „doboz” div
.doboz {szélesség: illeszkedés-tartalom;
magasság: 50 képpont;
szín: szellemfehér;
padding: 6px;
margó: 2px;
betűméret: 18 képpont;
}
Az ' .doboz ” a div osztály dobozára utal. Alább láthatók a rá alkalmazott tulajdonságok:
-
- ' szélesség ' ingatlan ' értékkel' fit-tartalom ” használja a rendelkezésre álló helyet, de nem haladja meg a tartalmat.
- ' magasság ” az a tulajdonság, amely meghatározza az elem magasságát.
- ' szín ” határozza meg az elem betűszínét.
- ' párnázás ” tulajdonság teret hoz létre az elem határán belül vagy a tartalom körül.
- ' árrés ” határozza meg az elem körüli teret.
- ' betűméret ” tulajdonság határozza meg a betűméretet.
Stílus „szín-1” oszt
.szín- 1 {háttérszín: #00ABB3;
}
Az ' háttérszín ' tulajdonság a ' .szín-1 ” div.
Stílus „szín-2” oszt
.szín- 2 {háttérszín: #083AA9;
}
Stílus „szín-3” oszt
háttérszín: #4C6793;
}
Megfigyelhető, hogy az elem szélessége megegyezik a tartalommal:
Nagyszerű! Sikeresen megtanultuk a CSS használatát szélesség ' ingatlan ' értékkel' fit-tartalom ”.
Következtetés
A CSS width tulajdonság lehetővé teszi, hogy több értéket használjunk. Ezek az értékek százalékban, pixelben vagy többben vannak megadva. A tartalom szerinti beállításhoz a „ fit-tartalom ” érték állítható be. Ez a bejegyzés a CSS-szélesség tulajdonságot az illesztés-tartalom értékkel egy gyakorlati bemutatóval ismertette.