Noen ganger kan det være utfordrende å designe nettsteder som ser bra ut på en rekke enheter. HTML gir flere egenskaper for å angi elementets størrelse og posisjon for å løse noen responsive problemer. De vanligste egenskapene er “bredde”Og“høyde”. Disse egenskapene brukes til å spesifisere elementets størrelse. Videre kan vi bruke maksimale, maksimale, min-høye og min bredde egenskaper for å løse problemer relatert til responsivitet.

Dette innlegget vil dekke:

• Hvordan justere den maksimale høyden på elementet med CSS?
• Hvordan justere minimumshøyden på elementet med CSS?
• Hvordan justere minimumsbredden på elementet med CSS?
• Hvordan justere den maksimale bredden på elementet med CSS?

Forutsetning: Opprett HTML -fil

Opprett først en HTML -fil ved å følge trinnene som er nevnt nedenfor:

• Legg til en "”Element med klassenavnet”hoved-”.
• Inne i dette, tilsett to “”Elementer med klassenavnet”Layout-img”Og“Layout-innhold”, Henholdsvis.
• “” -Elementet som har klasse “Layout-img” inneholder “”Element som er assosiert med“src”Attributt, som spesifiserer bildens URL og“bredde”Attributt for å definere elementets bredde.
• “” Elementet med “Layout-innhold”Holder en“

  ”Og“

  ”Elementer for overskrift og avsnitt.

Her er HTML -koden:

Lær med oss

Egenskapen "bredde" brukes til å sette elementets bredde.
Eiendommen "høyde" brukes til å sette elementets høyde.

I den kommende delen lærer vi å bestemme høyden og bredden på HTML -elementene ved hjelp av CSS.

Stil “Main” -klasse

Først får du tilgang til hoved”Container ved hjelp av klasseattributt“.hoved-”. Bruk deretter følgende CSS -egenskaper:

.hoved
Bredde: 300px;
Høyde: 360px;
Margin: Auto;
Font-størrelse: 20px;
Grense: 1px fast RGB (237, 234, 234);
Border-Radius: 20px;
bakgrunnsfarge: RGB (235, 235, 235);

Her er CSS -stylingegenskapene som brukes på hoveddiven:

• “bredde”Bestemmer elementets bredde.
• “høyde”Setter elementets høyde.
• “margin”Legger til mellomrom på alle sider av elementet.
• “skriftstørrelse”Justerer skriftstørrelsen.
• “grense”Eiendom brukes til å sette en grense rundt elementet. Den har verdiene for grensebredde, stil og farge.
• “Border-Radius”Eiendom gjør elementets kanter rundt.
• “bakgrunnsfarge”Bruker elementets bakgrunnsfarge.

Produksjon

Stil "layout-content" -klasse

.Layout-Content
polstring: 0 10px;
bakgrunnsfarge: RGB (233, 179, 112);

"" Å ha klasse "Layout-innhold”Er stylet med“polstring”Eiendom som gir plass rundt elementets innhold.

Produksjon

Hvordan justere den maksimale høyden på elementet i CSS?

“maksimal”Eiendom bestemmer den maksimale høyden på elementet. Innholdet vil overløpe hvis det overstiger maksimal høyde.

I CSS, spesifiser den maksimale høyden på "" elementet som har et "Layout-innhold”Klasse ved å spesifisere“maksimal”Eiendom:

Maks-høyde: 100px;

Produksjon

Hvordan justere minimumshøyden på elementet i CSS?

“Min-Height”Eiendom justerer minimumshøyden på elementet. Det vil bli brukt hvis elementets innhold er mindre enn minimumshøyden. Det har ingen effekt hvis innholdet overstiger min-høyden.

Legg til "Min-Height”Eiendom til klassen”Layout-innhold”For å spesifisere minimumshøyden på elementet:

Min-Height: 100px;

Produksjon

Hvordan justere minimumsbredden på elementet i CSS?

CSS “Min-bredde”Eiendom bestemmer elementets minimumsbredde. “Min-bredde”Brukes på elementet hvis innholdet er mindre enn minimumsbredden på elementet. Det vil ikke vise noen effekt hvis innholdet overstiger minimumsbredden.

Legg til "Min-bredde”Eiendom til klassen“ Layout-Content ”for å se hvordan det påvirker:

Min-bredde: 310px;

Produksjon

Hvordan justere den maksimale bredden på elementet i CSS?

CSS “Maks bredde”Eiendom brukes til å bestemme elementets maksimale bredde. Vi kan si at det har en fast elementbredde. Hvis innholdet overstiger elementets bredde, vil innholdet overløpe. Som et resultat vil høyden endres automatisk.

Legg til "Maks bredde”Eiendom med verdien”230px”For å se effekten:

Maks bredde: 230px;

Produksjon

Vi har lært hvordan vi skal spesifisere bredde- og høydeegenskapene til elementene ved hjelp av CSS.

Konklusjon

For å stille inn HTML -elementets høyde og bredde, CSS “høyde”Og“bredde”Egenskaper brukes. Disse CSS “Min-bredde”,“Maks bredde”,“Min-Height”, Og“maksimal”Egenskaper brukes til å begrense bredden og høyden på elementet i forhold til overordnede element. Denne artikkelen har demonstrert metodene for å begrense elementets størrelse ved å bruke CSS -egenskapene.