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.
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?
- Opprett en code sandbox på codesandbox.io. Velg “static” som prosjekt. Lag en ekstern stylesheet og lenk den til HTMLen din.
- Lag en som har en fixed høyde og bredde
- 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?)
CSS boksmodellen
By Camilla Larsen
