CSS boksmodellen

Laget av Camilla Larsen

Agenda

1

Introduksjon til boksmodellen

2

Oppgaver

3

Live koding

The CSS box model as a whole applies to block boxes and defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on a page.

– Google

Dette bestemmer størrelsen på boksen

Content - Innholdet, feks teksten i et avsnitt

Padding - “Luften” mellom innholdet og border Border - Selve kanten på boksen

Dette bestemmer ikke størrelsen på boksen

Margin - Skaper avstand til innhold rundt

Box shadow - Legger på skygge rundt boksen 

Praktisk oppgave

Hvis det er så mange elementer i en boks, hvordan er det vi egentlig setter høyden eller bredden?

  1. Opprett en code sandbox på codesandbox.io. Velg “static” som prosjekt. Lag en ekstern stylesheet og lenk den til HTMLen din.
  2. Lag en som har en fixed høyde og bredde
  3. Legg på en border i hvilken som helst tykkelse. Inspiser elementet og legg merke til dimensjonene på høyde, bredde og border.

Tenk over: Hva er den totale høyden og bredden på elementet? Skal du måtte regne ut hvor stor borderen er hver gang du skal sette en fast størrelse på noe?

Nei - Bruk box-sizing propertyen. Sett til box-sizing: border-box.
Hva skjedde med størrelsen nå?

Det er veldig vanlig å sette border-box på hele dokumentet

Vi tar en gjennomgang på hvorfor dette kan være lurt

Ok, så det var individuelle bokser, men hvorfor havner de der de gjør?

display: box og display: inline

display: inline

De vanligste:

  • <a> (lenke / )
  • <button>
  • <span>

display: block

Alt som skal fylle en hel rad.

● h1, h2, osv

● div

● lister

● section

● form

Praktisk øvelse: normal flow

1. Lag noen av hver type i codesandboxen.
a) Hva ser du når du inspiserer?

b) Legg spesielt merke til margin på elementer med display: box

2. Lag et avsnitt som består av tekst men med en anchor eller span som wrapper litt av teksten.

a) Hvor mange bokser består dette avsnittet av nå?

b) Hva er displayet på disse?

c) Hva er displayet på den ytre-boksen?

d) Prøv å sett en høyde på anchor eller span som du har brukt. Skjer det noe? Hva om du endrer display til block? Hva med line-height? Hva med line-height på avsnittet som wrapper alt sammen?

e) Prøve å sett margins, i alle retninger på span eller anchor-taggen. Skjer det noe? Hva med padding?

3) Lag to avsnitt etter hverandre.

a) Er det margin mellom dem? b) Hvor kommer egentlig denne stylingen fra som du ikke har satt selv?

c) Wrap dem i en div. Sett margin på begge til 0. Noter den totale høyden på div-en.

d) Definer en margin-bottom på det første avsnittet og en margin-top på den nederste. Er den totale høyden på div-en det du forventer?

Praktisk øvelse - Normal Flow (avansert)

1. Forsøk å lage noen DIVer som er nestet inn i en annen DIV, men sett disse “children”-DIVene til display: inline.

a) Fungerer det?

b) Hvorfor eller hvorfor ikke?

 

2. Undersøk om det er en annen måte å gjøre dette på, hvor du faktisk klarer å sette høyden selv.

 

3. Lag en ordered eller unordered liste (<ol> eller <ul>), fyll den med noen <li>

a) Hva er displayet på disse?

b) Hvordan oppfører de seg? (Hadde du sagt at dette er en block eller en inline box?)