Høydeegenskaper i CSS forklarte

Høydeegenskapen justerer høyden på et element, eller man kan si at det strekker seg/klemmer elementet i den vertikale retningen. Blokkelementene får høyden i henhold til innholdet, og hvis høyden må justeres, må høydeegenskapen brukes.

Ettersom høyden er en av handlingene nærmest polstring, grense og marginer. Imidlertid påvirker verken dem dem eller får virkning av dem. Denne beskrivende guiden gir arbeid og bruk av høydeegenskaper i CSS med følgende læringsresultater:

• Arbeider med høyde eiendommen i CSS
• Bruk av høydeeiendommer i CSS
• Forskjellen mellom høyde og maksimal/min-høyde

Hvordan fungerer høyde eiendom i CSS

Arbeidet med høydeegenskaper i CSS avhenger av syntaksen nedenfor:

velger høyde: verdi;

Velgeren kan være et hvilket som helst element eller kan referere til CSS -klassen i stylingsarket. Høydenes verdi kan settes i forskjellige måleenheter som er angitt nedenfor;

Lengde: Lengden (vertikal lengde) kan defineres i enheter som PX, EM osv. PX er den statiske verdien, mens EM varierer i henhold til standardverdien til overordnet element. Som om kroppshøyden er satt til 20px (som en standardhøyde), vil det være ekvivalent med 1EM.

Auto: Denne verdien justerer høyden i henhold til standardinnstillingen for nettleser

Prosent (%): Prosentandelen av hovedelementet tas som referanse. For eksempel vil 50% -verdien justere høyden til 50% (i henhold til høyden på overordnet element.)

Opprinnelig: Dette bruker standardhøydeverdien

Arve: Denne verdien henter høyden fra overordnede element

Arbeidet med høydeegenskapen i CSS avhenger hovedsakelig av måleenheten som brukes.

Hvordan bruke høydeegenskapen i CSS

Denne delen gir flere eksempler som viser funksjonaliteten til høydeegenskapen i CSS.

Eksempel 1: Bruke lengde/prosentandel av høydeegenskaper

Dette eksemplet bruker lengdeverdien med forskjellige måleenheter, og følgende kode praktiseres i denne forbindelse.

Justere høyden (ved hjelp av lengde og prosent)

Høyden er i PX

Høyden er i prosent (%)

Høyde i dem

Beskrivelsen av koden er gitt nedenfor:

• opprettet tre CC -klasser som heter “Prim”, “Sec” og “ter”
• "Prim" -klassen vurderer høyden i "PX", mens "SEC" og "TER" -klassene bruker "%" og "EM" for høydelengde (vertikal)
• De tre CSS -klassene brukes i tre avsnitt (som er opprettet i kroppen)

Bildet av ovennevnte kode vises nedenfor,

Produksjon:

Eksempel 2: Bruke automatisk, arve og innledende verdier for høydeegenskap

Dette eksemplet praktiserer auto, arve og innledende verdier av høydeegenskaper i CSS. For å gjøre det praktiseres koden nedenfor

Justere høyden

Høyden er satt til initialverdi

Høyden arves

Høyde i bil

Beskrivelsen av koden er angitt nedenfor:

• Et CSS for “Div” -element opprettes (som det vil bli brukt som foreldreelement)
• Tre CSS -klasser “INI”, “INH” og “AUT” brukes som vil bli brukt til høydeverdier (initial, arve og auto)
• Ett avsnitt bruker "INI" -klassen, mens avsnittet som bruker "INH" -klassen er inneholdt i en div og tredje avsnitt benytter seg av "AUT" CSS -klasse

Bildet av ovennevnte kode vises nedenfor

Produksjon:

Eksempel 3: Bruke høyde med maksimal og min-høyd

La oss differensiere arbeidet med høyde eiendom fra maksimale/min-høye egenskaper ved å bruke koden skrevet nedenfor.

Justere høyden

Høyde med maksimal høyde

Høyde med minhøyde

Beskrivelsen av koden er

• To CSS -klasser er opprettet kalt “HX” og “HN”
• "HX" -klassen inneholder "høyden" og "maksimal" egenskaper
• "HN" -klassen vurderer "Min-Height" og "høyde" -egenskaper
• "HX" -klassen er tilknyttet første ledd, mens "HN" -klassen brukes i andre ledd.

Bildet av koden er gitt nedenfor

Produksjon:

Det observeres fra produksjonen at den maksimale eiendommen dominerte høydeegenskapen og min-høyde-eiendommen dominerte høydeegenskapen.

Ved å gå gjennom eksemplene har vi gitt funksjonaliteten til høyde-eiendommer og beskrev også atferden ved å bruke den med max/min-height egenskaper.

Konklusjon

Høydeegenskapen i CSS justerer høyden (vertikal lengde) på elementet. Denne artikkelen gir arbeid og bruk av høydeegenskaper i CSS. Høydeegenskapen blir ikke utført av grense/margin/polstring, men den kan påvirkes av den maksimale høye og min-høye eiendommen til CSS. Vi har gitt få eksempler som bruker høyden med min-høye/maksimale høyde, og det konkluderes med at høydeegenskapen må brukes alene (ikke med maksimal/min-høyde).