Breddeegenskaper i CSS forklart

Breddeegenskapen justerer bredden på et element ved å strekke seg i horisontal retning (inne i polstringen). Breddeegenskapen er knyttet til polstring, grense og margin, men den påvirker verken dem eller blir endret av disse. Blokkelementene oppnår bredden i henhold til sidebredden; Breddeegenskapen lar deg imidlertid justere bredden i henhold til kravet.

Denne beskrivende guiden gir arbeid og bruk av breddeegenskaper i CSS. Arbeidet med breddeegenskaper styres av syntaks som brukes, og flere eksempler er sitert for å illustrere bruken av breddeegenskapen.

Hvordan breddeegenskap fungerer i CSS

Bredden på et element kan settes ved å bruke syntaks skrevet nedenfor.

velger bredde: verdi;

Velgeren kan være et hvilket som helst element eller kan referere til CSS -klassen i stylingsarket. Verdien av bredden kan settes i forskjellige måleenheter som er angitt nedenfor:

• Lengde: Verdien er definert i PX, EM. Verdien av EM varierer i henhold til standardstørrelsen som er satt for overordnet element. For eksempel, hvis standardstørrelsen er satt til 15px, vil den telles som 1EM og holde standarden til 15px, vil størrelsesverdien 2em være ekvivalent med 30px.
• Auto: Nettlesere justerer verdien automatisk
• Prosent ( %): Verdien (i %) knytter seg til bredden på overordnede element. For eksempel vil 50% -verdien justere bredden til 50% (av overordnede element eller hvor det målrettede elementet er inneholdt).
• Arve: Breddenes verdi av overordnede element hentes
• Initial: Standardbreddeverdien brukes

Arbeidet med breddeegenskapen i CSS avhenger hovedsakelig av måleenheten som brukes.

Hvordan bruke breddeegenskapen i CSS

Denne delen gir flere eksempler som viser funksjonaliteten til breddeegenskapen i CSS.

Eksempel 1: Bruke breddeegenskaper med lengde/prosentandel

Dette eksemplet forklarer bruken av breddeegenskaper med forskjellige målinger av lengde og prosentandel. Koden presentert nedenfor refererer til dette eksemplet:

Justere bredden

Bredde i px

Bredde i dem

Bredde i %

Beskrivelsen av koden er gitt nedenfor:

• Tre CSS -klasser er opprettet kalt “PX ',“ EM ”og“ Per ”
• "PX", "EM" og "PER" bruker henholdsvis PX, EM og % for bredde måling
• Disse tre klassene brukes i tre avsnitt for å demonstrere bruken

Bildet av koden er gitt nedenfor

Produksjon:

Eksempel 2: Bruke bredde med innledende, arve og bilverdier

De første, arve- og bilverdiene brukes i dette eksemplet for å endre bredden på elementet. For å gjøre det utøves følgende kode:

Justere bredden med auto/innledende/arveverdier

Opprinnelig bredde

arvelig bredde

automatisk bredde

Koden er beskrevet som

• Tre CSS -klasser er laget kalt “Initial”, “Arve” og “Auto”
• Disse klassene brukes i tre avsnitt som representerer verdiene “Initial”, “Arve” og “Auto” av bredden
• En div er stylet med 50% bredde og bakgrunnsfargen som vil bli brukt som foreldre til ett avsnitt (som brukes med arve CSS-klassen)

Bildet av koden vises nedenfor

Produksjon:

Fra utgangen observeres det at bredden på andre ledd er arvet fra Div (hvis bredde er 50%) og dermed vil avsnittet være begrenset til 50% av dets overordnet (DIV) -element.

Eksempel 3: Bruke bredde med maks bredde og min bredde

Maks bredde og min bredde definerer henholdsvis øvre og nedre bredde. Hvis breddeegenskapen brukes med min bredde/maks bredde, er det sjanser for at resultatet ikke kan være det samme som per krav. Verdien av bredden er mulig å bli kompromittert under en av følgende forhold:

• Hvis bredde < max-width then value of max-width will be used and
• Hvis bredde < min-width then the width would be set according to the min-width value

La oss øve på å bruke koden skrevet nedenfor.

Bruker bredde med min bredde og maks bredde

bredde med min bredde

bredde med maks bredde

Beskrivelsen av kode er gitt nedenfor

• To CSS-klasse er opprettet kalt “Min” og “Max” som bruker bredde med min bredde og bredde med maks bredde
• Verdiene av bredde i "min" og "maks" -klasser er henholdsvis 25% og 75%, mens minbredden er 75% og maks bredde er 50%
• Disse CSS -klassene brukes i to avsnitt

Bildet av koderedigereren vises nedenfor:

Produksjon:

Fra output er bredden påvirket av min bredde og maks bredde. Derfor antydes det at bredden må brukes separat ellers kan eiendommen føre til underlig produksjon.

Konklusjon

Breddeegenskapen i CSS brukes til å justere bredden (horisontal lengde) på elementet. Det knytter sammenheng med polstring, grense og marginer av et element. Verken bredde eller polstring/margin/grense påvirker imidlertid hverandre. Denne artikkelen gir arbeid og bruk av breddeegenskaper i CSS. Breddeegenskapen kan påvirkes av den maksimale egenskapen til CSS. Så det anbefales å bruke breddeegenskapen ved å holde maks bredde og min bredde. Videre har vi demonstrert eksempler som bruker bredde og maks/min-breddeegenskap i CSS.