Boksmodell i CSS | Forklart

CSS, et forkortelse av det kaskaderende stilarket brukes til å style HTML -elementer, og hvert innhold du ser på en webside er et element i HTML E.g tekst, ikoner, knapper og bilder. Hvert element bruker litt plass på nettsiden, og at plass okkupert av HTML -elementet er kjent som boksen til det elementet. Boksmodell kan representeres som området okkupert av HTML -elementet som videre består av flere egenskaper som polstring, margin og grenser.

Denne oppskrivningen vil gi en trinn-for-trinns guide for å forstå CSS-boksmodellen, og vi vil lære hver av de nedenfor beskrevne egenskapene i detalj ved hjelp av eksempler:

• Innholdsområde i kassemodell
• Polstring i boksemodell
• Grenser i kassemodell
• Margin i boksemodell

Så uten forsinkelse, la oss fortsette!

Innholdsområde i kassemodell

Innhold er en av de mest betydningsfulle delene av boksemodellen som brukes til å vise teksten, bildene osv., og plassen som kreves for å vise innholdet er kjent som innholdsområdet. Innholdsområdet kan endres ved hjelp av høyde og bredde egenskaper.

Den er til stede i midten av boksemodellen og blir fremhevet som et blått område i følgende figur:

Polstring i boksemodell

Polstring er ikke annet enn plassen rundt innholdet, det er til stede utenfor innholdet og inne i grenseområdet. Vi kan kontrollere polstringen på hver side separat, eller vi kan stille polstring av alle sider samtidig ved å bruke polstring eiendom. Polstringen blir fremhevet som et grønt område i figuren gitt nedenfor:

Grensen i kassemodell

Grensen viser rundt polstringen og inne i marginen. Grenser kan settes rundt et hvilket som helst HTML -element, vi kan spesifisere grenseegenskapene for hver side i.e. øverst, venstre, høyre og bunn ved hjelp av grensen, grensen til venstre, grense-høyre, grensen-bunnegenskaper henholdsvis. Vi kan sette hele grensen samtidig ved å bruke grense eiendom. Grensen blir fremhevet som et gult område i figuren som er gitt nedenfor:

Margin i boksemodell

Plassen utenfor grensen kalles marginen. De margin Eiendom setter marginen på hver side individuelt eller som en helhet. Margen fremheves som et oransje område i det nevnte figurene:

Eksempel

La oss vurdere et eksempel for å forstå hele konseptet med boksemodellen:

Innhold: Et HTML -element som er til stede i midten av boksen
modell
Polstring: polstring er ikke annet enn plassen rundt innholdet, det er til stede utenfor innholdet og inne i
grenseområde
Borders: grensen viser rundt polstringen og inne i margen
Margin: Plassen utenfor grensevinduet kalles margin

Ovennevnte utdrag angir innholdets bredde 500px, høyde 100px, grense 5px og polstring 10px, som et resultat viser det følgende utgang:

Linjalredoksen brukes til å beregne høyden og bredden, den viser den totale bredden lik 530, og total høyde tilsvarer 130.

Hvordan bekrefte bredden og høyden på boksemodellen

Total bredde = venstre-margin + venstre grense + venstre-padding + innholdsarealets bredde + høyre-padding + høyre-grense + høyre-margin
Bredde = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px Total høyde = margin-top + grenset-topp + padding-top + innholdets høyde + padding-bottom + border-bottom + margin-bottom
Høyde = 0 + 5px + 10px + 100px + 10px + 5px + 0px = 130px

Konklusjon

Boksmodell spesifiserer design og utforming av en hvilken som helst webside ved å bruke flere CSS -egenskaper som kant, høyde, bredde, margin og polstring. Denne oppskrivningen demonstrerte en omfattende oversikt over CSS-boksmodellen der vi har lært hvordan vi bruker boksemodellen til å tilpasse oppsettet til et hvilket som helst HTML-element.