Hvordan begrense grenselengden? - CSS

Mens de designer et nettsted, har brukere noen ganger vanskeligheter med å skape en grense som er kortere enn foreldreelementet. For å overvinne denne vanskeligheten brukes flere CSS -egenskaper og HTML -elementer. For dette målet, noen HTML -elementer, inkludert "”,“”, Eller“Pseudo-elementer”Og“grense”Egenskaper brukes. Videre kan brukere begrense grensen ved å bruke “grense-venstre”,“Border-Bottom”,“Grense-høyre”, Og“grensen" egenskaper.

Dette innlegget forklarte metoden for å begrense grenselengden i CSS.

Hvordan begrense grenselengden med CSS?

For å begrense grenselengden med CSS, kan du prøve ut de nevnte instruksjonene en etter en.

Trinn 1: Lag en div container

Først må du lage en DIV -beholder med "”Tag og legg til“klasse”Attributt inne i taggen.

Trinn 2: Opprettet nestet div container

Legg deretter til en annen div -beholder mellom de første taggene og sett inn en "id" Egenskap:

Trinn 3: Style “Div” -elementet

Nå, stil "div”Ved å bruke følgende CSS -egenskaper:

.Main-div
Høyde: 150px;
Bredde: 100px;
Posisjon: relativ;
Bakgrunn: #B3F00B;

Detaljene i den ovennevnte koden er som følger:

• Først får du tilgang til beholderen ved hjelp av ".Main-div”Klasse.
• Den lagt til “høyde”Eiendom definerer høyden på DIV -beholderen.
• Deretter, "bredde”Definerer elementets bredde størrelse.
• Neste, “posisjon”Tildeler posisjonsmetodetypen som brukes til et element. For eksempel har vi brukt "slektning”For å endre posisjonen i forhold til seg selv og overordnede element.
• Etter det, "bakgrunn”Brukes til å sette bakgrunnen for DIV.

Produksjon

Trinn 4: Sett nedre kant

Border-Bottom: 2px Solid #1C2AF5;

For å sette den nederste grensen til en div, CSS “Border-Bottom”Brukes. Her spesifiserer den første verdien grensebredden, den andre er grensestilen, og den tredje er grensefargen.

Produksjon

Trinn 5: Begrens venstre kant

#grense-venstre
grense-venstre: 2px solid #2a1cf5;
Posisjon: Absolutt;
Topp: 50%;
Bunn: 0;

I ovennevnte kode kode, "#Border-venstre”Brukes til å få tilgang til DIV-elementet for å bruke de nedenfor-listede egenskapene:

• “grense-venstre”Er en kortvarig eiendom som brukes til å sette elementets venstre kant.
• “topp”Eiendom justerer vertikalt det plasserte elementet.
• “bunn”Brukes for å justere den nederste kanten av det plasserte elementet.
• “posisjon”Eiendom er satt som“Absolutt”For å fikse posisjonen til beholderen.

Produksjon

Vi har forklart prosedyren for å begrense grenselengden i CSS.

Konklusjon

For å begrense grenselengden, først, lag en nestet div -beholder ved hjelp av "" stikkord. Få tilgang til den ved å bruke den spesifikke klassen eller ID -en og bruke CSS -egenskapene for styling. Neste, CSS “Border-Bottom”Brukes for å sette et elements bunngrense og“grense-venstre”Eiendom tilfører en kant på venstre side av et element. Denne opplæringen har forklart hvordan du kan begrense grenselengden med CSS.