CSS -boksmodellen forklart med eksempler

Hvis du planlegger å bygge et fantastisk weboppsett, må du vite om marginer, grenser, polstring og innhold. Hvert element i webdesign, enten det er et bilde eller en tekst, bruker en boks med disse egenskapene. Du kan enkelt bygge komplekse oppsett ved å leke med boksmodellen. I denne artikkelen vil vi dissekere CSS -boksmodellen og vise deg hvordan du bruker disse egenskapene med praktiske eksempler.

Hva er CSS -boksmodellen?

CSS -boksmodellen er en standard laget av World Wide Web Consortium. Den beskriver alle elementene i et HTML -dokument som rektangulære bokser med egne dimensjoner. Disse boksene inneholder et innholdsområde og valgfrie omliggende marginer, kantlinjer og polstringsområder. Så la oss utforske delene av en CSS -boks.

La oss avdekke de fire lagene i CSS -boksmodellen.

Første lag: Innhold

Innholdsområdet inneholder hovedinnholdet i elementet, som kan være et bilde, en tekst eller en hvilken som helst form for medieinnhold. Du kan endre dimensjonene til elementer på blokknivå ved å bruke høyde og bredde egenskaper.

Andre lag: Polstring

Polstring er mellomrommet mellom innholdsboksen og kantboksen. Selv om det sitter rundt innholdet ditt som mellomrom, kan du bruke en bakgrunnsfarge for å visualisere forskjellen. Du kan søke polstring, polstring-høyre, polstring-bunn, og polstring-venstre egenskaper for å endre plassen.

Tredje lag: Border

Grensen omslutter innholdet og polstringsområdet. Du kan endre størrelsen og style grensen ved hjelp av kantbredde, grensestil, og grensefarge egenskaper.

Fjerde lag: Margin

Det siste laget av boksmodellen er mye brukt til å generere mellomrom mellom elementer. Margen omslutter innhold, polstring og kantområde. Du kan bruke margin-top,margin-høyre, margin-bunn, og margin-venstre egenskaper. Du kan også gi marginegenskapen en negativ verdi eller auto for å oppnå noen fantastiske plasseringsteknikker.

Prosjektoppsett for CSS -boksmodell

La oss bygge et miniprosjekt for å demonstrere den grunnleggende boksmodellen med en innholdsboks og egenskaper for polstring, kant og marg. Du kan gå med tekst, bilde eller medieinnhold. Vi starter med å sørge for at den er riktig strukturert.

Struktur med HTML

Produksjon:

Du kan bruke innebygde funksjoner i nettleseren din, for eksempel Utviklerverktøy for Chrome, for å se hva som skjer. Vi bruker to bilder fra Unsplash. For enkelhets skyld gjemmer vi smarttelefonbildet med display: ingen; til vi trenger det senere.

Styling ved hjelp av CSS

/*************************
GRUNNLEGGENDE STIL
*************************/
* {
margin: 0px;
polstring: 0px;
}
kropp {
display: flex;
flex-direction: rad;
} 
.vise {
display: ingen! viktig;
}

La oss nå style innholdsboksen vår. Først setter vi inn høyde og bredde av bildet. Også å gi en bakgrunnsfarge hjelper på bedre visualisering. Så, la oss gjøre det.

/*************************
INNHOLDSBOKS
*************************/
.content-box {
display: flex;
flex-direction: rad;
justify-content: center;
align-items: center;
/ * Styling av innholdsboksen ved hjelp av høyde- og breddeegenskaper */
bakgrunnsfarge: #fdf;
høyde: 20em;
bredde: 30em;
}

Gi innholdet rom for å puste med polstring

Du kan enten sette polstring, polstring-høyre, polstring-bunn, og polstring-venstre eiendommer individuelt eller bruk stenografi. Prøv å bruke stenografien hvis mulig, siden det kan spare deg for litt tid. La oss se hvordan polstring fungerer.

 /*************************
PADDING
*************************/
/ * Påføring av polstring */
polstringstopp: 5 em;
polstring-høyre: 2em;
polstring-bunn: 8em;
polstring-venstre: 2em;
/ * Polstring stenografi */
/ * topp/høyre/bunn/venstre */
polstring: 5em 2em 8em 2em;
/ * topp/horisontal/bunn */
polstring: 5em 2em 8em;

Produksjon:

Tegn linjer rundt polstring ved hjelp av kant

Sørg for at du bruker grensefarge egenskap for å gi grensen en tydelig farge fra bakgrunnen. Du kan velge grensestil enten individuelt eller på en gang ved å bruke shorthand -eiendommen. Det samme gjelder kantbredde eiendom.

Du kan også stille inn grense-radius å gi boksen avrundede hjørner med en radius inn px, rem, emeller prosent.

 /*************************
GRENSE
*************************/
/ * Bruke grenseiendommer */
/ * Angi kantfargen */
kantfarge: rgb (148, 234, 255);
/ * Velg kantstil */
border-top-style: solid;
border-right-style: stiplet;
kant-bunn-stil: groove;
grense-venstre-stil: møne;
/ * stenografi i kantstil */
/ * topp/høyre/bunn/venstre */
grense-stil: solid stiplet groove ås;
/ * Angi kantbredde */
kant-topp-bredde: 4em;
kant-høyre-bredde: 2em;
kant-bunn-bredde: 2em;
kant-venstre-bredde: 2em;
/* kantbredde stenografi*/
/ * topp/høyre/bunn/venstre */
kantbredde: 4em 2em 2em 2em;
/ * topp/horisontal/bunn */
kantbredde: 4em 2em 2em;
/ * grenseeiendom stenografi */
/* kant: 4em solid rgb (148, 234, 255); */
/ * Angi kant-radius */
grense-radius: 5em;
kant-radius: 20%;

Produksjon:

Legg til mellomrom mellom esker med marg

Du kan sentrere en boks horisontalt med margin: 0 auto, forutsatt at den har en bestemt bredde.

 /*************************
MARGIN
*************************/
/ * Bruke marginegenskaper */
margin-top: 4em;
margin-høyre: 5em;
margin-bunn: 3em;
margin-venstre: 5em;
/ * Margin stenografi */
/ * topp/høyre/bunn/venstre */
margin: 4em 5em 3em 5em;
/ * topp/horisontal/bunn */
margin: 4em 5em 3em;
/ * Bruke automargin */
margin: 3em auto;

Produksjon:

Du kan angi marginegenskapen ved å bruke en, to, tre eller fire verdier. Verdiene kan være en lengde, prosentandel eller et søkeord som auto. La oss forstå hvordan det fungerer:

• Når du bare angir én verdi, betyr det at alle fire sidene vil ha samme margin.
• Når du angir to verdier, betyr den første verdien margin-topp og margin-bunn mens den andre verdien spesifiserer margin-høyre og margin-venstre.
• Når du angir tre verdier, gjelder den første og siste for margin-topp og margin-bunn henholdsvis. Den mellomste verdien er for det horisontale området, dvs. margin-høyre og margin-venstre.
• Når du angir alle fire verdiene, gjelder de for henholdsvis topp, høyre, bunn og venstre (med klokken).

Vær oppmerksom på at du også kan bruke disse snarveiene for polstring og grenseegenskaper.

Se også: Essential CSS3 Properties Cheat Sheet

Har du noen gang brukt en negativ margin? La oss slette det for å visualisere det display: ingen for å vise vårt andre bilde, og sett deretter en negativ margin.

/* .vise {
display: ingen! viktig;
} */
.content-box {
display: flex;
flex-direction: rad;
align-items: center;
bakgrunnsfarge: #fdf;
høyde: 20em;
bredde: 30em;
polstring: 5em 2em 8em;
grense-stil: solid stiplet groove ås;
kantbredde: 4em 2em 2em;
kant-radius: 20%;
/ * Bruke negativ margin */
margin: 3em -20em 3em 5em;
}

Produksjon:

The Box Model: Making a Pixel Perfect Website

Boksmodellen lar deg definere mellomrom mellom elementer, legge til rammer og enkelt bygge et komplekst utseende. Du kan komme i gang med å lage et fantastisk nettsted. I mellomtiden kan du utforske grenseboks eiendommen i detalj og lek med koden ovenfor.

Du bør forstå at det er andre metoder for å legge ut innhold i CSS. Disse inkluderer CSS Grid og CSS Flexbox. Når du er komfortabel med boksmodellen, bør du fortsette å lære om disse alternativene.

CSS Flexbox Tutorial: The Basics

Plasser HTML -elementene dine perfekt ved hjelp av CSS Flexbox.

Les neste

Om forfatteren