CSS width-egenskaben definerer bredden af elementets indholdsområde. Dette område er rummet mellem et elements kant, polstring og margen. Desuden er CSS width egenskaben med værdien ' fit-indhold ” vil justere bredden af elementet i henhold til indholdet.
Denne undersøgelse vil forklare egenskaben CSS width med værdien fit-content.
Hvordan bruger man CSS-bredde-egenskab med tilpasningsindholdsværdi?
Med henblik på at bruge CSS width-egenskab med tilpasningsindholdsværdi, tjek den givne syntaks:
bredde: pasform
Eksempel
I HTML skal du tilføje tre div-elementer med det samme klassenavn ' boks ' og tre forskellige klasser ' farve-1 ', ' farve-2 ', og ' farve-3 ', henholdsvis. Tilføj
-element i hver div for at tilføje indhold til websiden:
< div klasse = 'kasse farve-1' >
< s > CSS-breddetilpasningsindhold s >
div >
< div klasse = 'kasse farve-2' >
< s > Hej Verden ! s >
div >
< div klasse = 'kasse farve-3' >
< s > Teamwork begynder med at skabe tillid. Vi er et team, der arbejder til en fælles mission. s >
div >
Her er outputtet af HTML-koden:
Indtil videre har vi diskuteret HTML-siden. Nu, i næste afsnit, vil vi anvende forskellige CSS-stile til HTML-elementerne for at få dem til at se bedre ud. I det igangværende eksempel vil vi tjekke opførselen af ' bredde ' ejendom med værdien ' fit-indhold ” i CSS.
Stil “kasse” div
.boks {bredde: pasform-indhold;
højde: 50px;
farve: spøgelseshvid;
polstring: 6px;
margin: 2px;
skriftstørrelse: 18px;
}
Det ' .boks ” henviser til div klasseboksen. Nedenfor er de egenskaber, der anvendes på det:
-
- “ bredde ' ejendom med værdien ' fit-indhold ” bruger den tilgængelige plads, men den vil ikke overstige indholdet.
- “ højde ” er den egenskab, der bestemmer elementets højde.
- “ farve ” definerer elementets skrifttypefarve.
- “ polstring ” egenskab producerer plads inden for elementets grænse eller omkring indholdet.
- “ margen ” bestemmer rummet omkring elementet.
- “ skriftstørrelse ” egenskab bestemmer skriftstørrelsen.
Stil 'farve-1' div
.farve- 1 {baggrundsfarve: #00ABB3;
}
Det ' baggrundsfarve ' egenskaben er indstillet til ' .farve-1 ” div.
Stil 'farve-2' div
.farve- 2 {baggrundsfarve: #083AA9;
}
Stil 'farve-3' div
baggrundsfarve: #4C6793;
}
Det kan observeres, at bredden af elementet er sat lig med indholdet:
Det er fantastisk! Vi har med succes lært brugen af CSS ' bredde ' ejendom med værdien ' fit-indhold ”.
Konklusion
CSS width egenskaben giver os mulighed for at bruge flere værdier. Disse værdier er i procent, pixels eller mere. For at indstille det i overensstemmelse med indholdet, skal ' fit-indhold ” værdi kan indstilles. Dette indlæg har beskrevet CSS width egenskaben med værdien fit-indhold med en praktisk demonstration.