Lengdeenheter i CSS

I CSS brukes lengdeenhetene til å definere dimensjonen til et HTML -element. Disse enhetene kan ha faste verdier så vel som dynamiske verdier for et responsivt grensesnitt. På grunn av dette er de kategorisert i to klasser Absolutt og slektning. De Absolutt Klassen inneholder de enhetene som tilbyr faste verdier, mens slektning Klassen har enheter som endrer verdiene sine i henhold til foreldrene eller rotelementet.

Lengdenheten brukes først og fremst til å sette bredde, høyde, polstring, margin, grense, fontstørrelse og mye mer. Når vi viser viktigheten, gir denne guiden en oversikt over lengdeenheter i CSS med følgende læringsresultater.

1. Liste over lengdeenheter i absolutt klasse
2. Liste over lengdeenheter i relativ klasse
3. Bruk av absolutte lengdeenheter og relative lengdeenheter

CSS -lengdeenheter

Denne delen verver lengdeenhetene i sin respektive kategori. Lengdeenhetene er bredt kategorisert i to kategorier, Absolutt og slektning. La oss utforske enhetene som faller inn under disse kategoriene og bruken av dem.

Hvordan bruke absolutte lengdeenheter

Denne kategorien inneholder de lengdeenhetene som har fast verdi over hele dokumentet. I situasjoner der den faste størrelsen på et element er nødvendig, tjener disse enhetene bedre formålet. Imidlertid er de absolutte lengdeenhetene ikke egnet for responsive design. Følgende tabell inneholder listen og beskrivelsen av absolutte lengdeenheter.

I tabellen ovenfor er den største enheten “Inches (in)” mens den minste enheten er “Piksler (PX)”. Blant disse, den PX Enheten praktiseres mest.

Eksempel: Bruke absolutte lengdeenheter

Følgende kode viser bruken av i, PX, PT og MM enheter av lengde.

Html

Bredde og høyde i piksler (PX)

Bredde og høyde i poeng (PT)

Bredde og høyde i millimeter (mm)

I koden ovenfor er tre avsnitt vedlagt i en enkeltelement (fungerer som et foreldreelement)

CSS

Fra ovennevnte CSS, Div -bredden og høyden på element er i tommer mens PX, PT og MM brukes som lengdeenheter i avsnitt.

Produksjon

Fra utgangen observeres det at barneelementene (avsnitt) ikke er påvirket av deres overordnet element ().

Hvordan bruke relative lengdeenheter

De relative lengdeenhetene manipulerer dynamisk størrelsen på elementet med hensyn til foreldrene eller rotelementet. Følgende liste refererer til CSS relative lengdeenheter.

Merk: I tilfelle, hvis det ikke er noe foreldreelement, blir enhetene justert i henhold til rotelementet ().

Eksempel: Bruke relative lengdeenheter

Dette eksemplet gir bruk av forskjellige relative lengdeenheter.

Html

Bredde og høyde i prosent i henhold til overordnede element

Bredde og høyde i EM (ifølge foreldre)

Bredde og høyde i REM (i henhold til rot)

I koden ovenfor opprettes tre avsnitt og er inneholdt i en Foreldreelement (div). Disse avsnittene bruker forskjellige relative lengdeenheter (Prosentandel, EM og REM) for å stille bredde og høyde.

CSS

I ovennevnte CSS -kode er bredde, høyde, bakgrunnsfarge og kant av overordnet element definert. De .per , .Em, og .REM -klasser definerer høyden/bredden i prosent (%), Efemeral (EM) og rotfunksjonell (REM).

Merk: Ettersom standard fontstørrelse av div er 16px, derfor 1EM = 16px og 1REM = 16px. De REM setter størrelsen i henhold til rot (kropp) element mens Em ville sette verdien i henhold til foreldre (DIV) -elementet.

Produksjon

Fra utgangen observeres det at Prosent og EM -enheter Juster bredden/høyden i henhold til overordnede element (DIV) mens REM Enheten angir bredden/høyden med hensyn til rotelementet (kropp).

Konklusjon

I CSS er lengdeenhetene kategorisert i to bredere kategorier: absolutte lengdeenheter og relative lengdeenheter. De absolutte lengdeenhetene har faste verdier, mens de relative enhetene endrer verdiene sine i henhold til foreldrene eller rotelementet. De absolutte lengdeenhetene er PX, PT, PC, IN, CM og MM, og enhetene %, EM, REM, VW, VHM VMIN, VMAX, og ex faller under relative enheter. For bedre forståelse har vi demonstrert bruken av disse enhetene ved hjelp av eksempler.