The boxmodel

WEB ESSENTIALS

Reset.css, box model, styling the box

Block vs inline

Block-elementen

C://index.html

  • Block elementen nemen standaard de volledige breedte in

  • Ze beginnen altijd op een nieuwe regel

  • Ze stapelen verticaal op elkaar, zoals blokken in een toren

  • Bijna alle elementen zijn block: <p>, <h1>, <h2>, <h3>...

  • Je kan de breedte en hoogte aanpassen in CSS

RECAP

Inline-elementen

  • Neemt enkel de eigen breedte in

  • Genereert géén nieuwe regel

  • Kunnen naast elkaar op dezelfde regel staan

  • Voorbeelden: <strong>, <em>, <a> ...

  • Je kan geen eigen breedte en hoogte instellen

RECAP

Inline-block elementen

= combinatie van beide

  • Plaatst zich naast andere elementen (zoals inline).

  • Je kunt wel breedte en hoogte instellen (zoals block).

  • Voorbeeld: <img>

🤓 Tip

inline-block kan handig zijn voor <a> elementen wanneer je deze wil opmaken als een button

/* Dit is standaard voor een p-element */
p {
  display: block;
}

/* En hier passen we dit aan. */
.special-paragraph {
  display: inline;
}

Soms wil je een block-element omzetten in een inline-element of andersom, dat kan in css met de display property

Display property

Reset CSS

Wat is een reset.css?

Een reset.css is een extra CSS-bestand dat je toevoegt om alle standaardstijlen van de browser te neutraliseren.

  • Styling verschilt van browser tot browser
  • Zit soms in de weg, door reset kan je met een "leeg blad" starten
/*
  Artevelde hogeschool CSS Reset v0.1
  Adapted version from Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/
*/

/*
  1. Use a more-intuitive box-sizing model.
*/
*, 
*::before, 
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

Artevelde's reset.css

Er bestaan een hele boel van deze "reset css" variaties die je online kan vinden, wij gebruiken onze eigen Artevelde's reset.css

  • Noem dit bestand altijd reset.css
/*
  Artevelde hogeschool CSS Reset v0.1
  Adapted version from Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/
*/

/*
  1. Use a more-intuitive box-sizing model.
*/
*, 
*::before, 
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

reset.css inladen

Voeg de reset.css altijd als eerste css-link toe in de head

  • Reset.css neutraliseert eerst de browserstijlen

  • Je eigen CSS overschrijft daarna die neutrale basis met eigen stijlen

  • Zou je reset.css na je eigen CSS inladen, dan zou deze jouw stijlen aanpassen

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    ...
  </head>
  ...

Box sizing model

Wat is the box model?

Elke website is opgebouwd uit blokken waarbij we de breedte, hoogte margin, padding... kunnen instellen

Wat is the boxmodel?

Elke blok kunnen we opbouwen op de volgende manier:

  • Content: De inhoud, zoals tekst of image
  • Padding: Ruimte binnen het element
  • Border: De rand (lijn) rondom het element
  • Margin: De ruimte tussen het element en andere elementen

Box sizing

The boxmodel kunnen we gebruiken om te berekenen hoeveel ruimte een element zal innemen op onze website. Wat opgeteld wordt, hangt hangt af van je box-sizing instellingen:

  • Content-box
  • Border-box

Content-box

Border-box

Box-sizing: content-box

  • Standaard instelling van de browser
  • Width & height tellen alleen voor content
  • padding en border worden daarbovenop toegevoegd
  • totale breedte = width + padding + border

Content-box

Box-sizing: content-box

Een voorbeeld

  • content: 200px

  • padding: 40px in totaal (20px padding links + rechts)

  • border: 10px in totaal (5px border links + rechts)

  • Totale breedte: 250px

*, 
*::before, 
*::after {
  box-sizing: content-box;
}

div {
  width: 12.5rem;        /* 200px, content breedte */
  padding: 1.25rem;       /* 20px ruimte binnen de box */
  border: 0.313rem solid black; /* 5px, rand */
  margin: 0.625rem;        /* 10px, ruimte buiten de box */
}

Box-sizing: border-box

  • Stellen we in met de reset.css
  • Width en height omvatten content, padding én border
  • De content krimpt automatisch om ruimte te maken voor padding en border
  • Totale breedte = width (inclusief alles)

Border-box

Box-sizing: border-box

Een voorbeeld

  • Totale breedte: 200px

  • border: 10px in totaal (5px border links + rechts)

  • padding: 40px in totaal (20px padding links + rechts)

  • content: 150px (200px - 40 px padding - 10px border)

*, 
*::before, 
*::after {
  box-sizing: border-box;
}

div {
  width: 12.5rem;        /* 200px, content breedte */
  padding: 1.25rem;       /* 20px ruimte binnen de box */
  border: 0.313rem solid black; /* 5px, rand */
  margin: 0.625rem;        /* 10px, ruimte buiten de box */
}

Box-sizing: border-box

We kiezen voor de border-box instelling omdat deze handiger is om te gebruiken

  • Je krijgt precies de afmetingen die je specificeert, ongeacht padding en border

  • Maakt responsive design en grid/flexbox layouts voorspelbaarder

  • Zit standaard in onze reset.css

Width & height

Width & height

Hiermee geef je een vaste breedte of hoogte aan een element

  • Kan je enkel instellen voor block-element (of inline-block)
  • Block-element heeft standaard een breedte van 100% en een hoogte die zich aanpast aan de content (auto)
  • Met width en height stel je je eigen waarden in
nav {
  width: 80%;
  height: 20rem;
}

Min & max waardes

Wanneer we responsive werken, kan het interessant zijn om te werken met min & max waardes

  • max-width: het element mag nooit groter worden dan deze waarde
  • min-width: het element mag nooit kleiner worden dan deze waarde
  • Je kan ook min-height & max-height instellen
.responsive-box {
  width: 100%;       /* probeer altijd de volle breedte van de parent te pakken */
  max-width: 50rem;  /* maar nooit groter dan 50rem */
  min-width: 10rem;  /* en nooit kleiner dan 10rem */
}

Padding

Padding

Padding is de ruimte tussen de content van een element en de rand (border) van dat element. Het is de "witruimte" binnen je element.

Padding

Padding kan je individueel per zijde toevoegen.

.my-box {
  padding-top: 2rem;
  padding-right: 1rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
}
.my-box {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

TOP

RIGHT

BOTTOM

LEFT

Padding

Je kan ook met een shorthand notatie werken. De waardes geef je kloksgewijs mee (top, right, bottom, left).

/* Alle zijden gelijk */
.my-box {
  padding: 1.25rem;/
}

/* Verticaal | Horizontaal */
.my-box {
  padding: 1rem 2rem;
}

/* Top | Horizontaal | Bottom */
.my-box {
  padding: 1rem 2rem 3rem;
}

/* Top | Right | Bottom | Left */
.my-box {
  padding: 1rem 2rem 1.25rem .5rem;
}

TOP

RIGHT

BOTTOM

LEFT

Padding

Border

Border

Borders vormen de rand rondom een element. Deze rand staat rond de content en de padding.

Border

Een border kan je de volgende eigenschappen geven, je kan deze ook samenvoegen in een shorthand notatie

  • border-width
  • border-style
  • border-color
.my-box {
  border-width: 1px;
  border-style: solid;
  border-color: hsl(0, 0%, 20%);
}
.my-box {
  border: 1px solid hsl(0, 0%, 20%);
}

Border-style

.border-styles {
  /* Doorgetrokken lijn */
  border: 1px solid hsl(0, 0%, 0%);
  /* Streepjeslijn */
  border: 1px dashed hsl(240, 100%, 50%);
  /* Puntjeslijn */
  border: 1px dotted hsl(0, 100%, 50%);
  /* Dubbele lijn */
  border: 2px double hsl(120, 100%, 25%);
  /* 3D groef effect */
  border: 3px groove hsl(0, 0%, 50%);
  /* 3D verhoogd effect */
  border: 3px ridge hsl(0, 0%, 50%);
  /* 3D ingedrukt effect */
  border: 3px inset hsl(0, 0%, 50%);
  /* 3D uitstekend effect */
  border: 3px outset hsl(0, 0%, 50%); 
}

Met border-style bepaal je de soort lijn: volle lijn, stippellijn...

Border

.my-box {
  border-top: 3px solid blue;
}

Je kan ook een border enkel aan 1 kant toevoegen

.my-box {
  border-top: 2px solid hsl(0, 100%, 50%);
  border-right: 1px dashed hsl(240, 100%, 50%);
  border-bottom: 1px dotted hsl(120, 100%, 25%);
  border-left: 1px double hsl(270, 100%, 50%);
}

Of elke kant een andere soort border geven

Border

Border-radius

Met border-radius voeg je afgeronde hoeken toe aan je element

.my-box {
  border: 0.5rem solid hsl(324, 100%, 14%);
  border-radius: 2rem;
}

Border-radius

Ook hier kan je weer verschillende waardes meegeven per hoek, of werken met een shorthand

/* Individuele hoeken */
.my-box {
  border-top-left-radius: 1rem;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 3rem;
  border-bottom-left-radius: 4rem; 
}

/* Shorthand: top-left | top-right | bottom-right | bottom-left */
.my-box {
  border-radius: 1rem 2rem 3rem 4rem;
}
  
/* Cirkel */
.my-box {
  border-radius: 50%;
}

Margin

Margin

Margin is de ruimte rondom een element, buiten de border. Het zorgt voor ruimte tussen verschillende elementen.

Margin

Net zoals bij padding, kan je deze individueel per zijde toevoegen.

.my-box {
  margin-top: 2rem;
  margin-right: 1rem;
  margin-bottom: 2rem;
  margin-left: 1rem;
}
.my-box {
  margin-top: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}

TOP

RIGHT

BOTTOM

LEFT

Margin

Je kan ook met een shorthand notatie werken. De waardes geef je kloksgewijs mee (top, right, bottom, left).

/* Alle zijden gelijk */
.my-box {
  margin: 1.25rem;/
}

/* Verticaal | Horizontaal */
.my-box {
  margin: 1rem 2rem;
}

/* Top | Horizontaal | Bottom */
.my-box {
  margin: 1rem 2rem 3rem;
}

/* Top | Right | Bottom | Left */
.my-box {
  margin: 1rem 2rem 1.25rem .5rem;
}

TOP

RIGHT

BOTTOM

LEFT

Margin

Elementen uitlijnen met margin

Naast een numerieke waarde, kan je een margin ook de waarde auto geven. Hiermee kan je een block element helemaal rechts of centraal uitlijnen binnen zijn parent.

/* Element rechts uitlijnen */
.my-box {
  width: 20rem;
  margin-right:auto;
}

/* Element centraal uitlijnen */
.my-box {
  width: 20rem;
  margin-left: auto;
  margin-right: auto;
}

Sizing units

Sizing units

  • Pixels (px):  vaste grootte ongeacht scherm, absolute unit
  • Percentage (%): Relatief aan de grootte van het parent-element
  • em: Relatief aan de font-size van het parent-element.
  • rem: Relatief aan de font-size van de root (html) (standaard 16px)
  • viewport width (vw):  Relatief aan de breedte van de viewport
  • viewport height (vh): Relatief aan de hoogte van de viewport

👎

😍

question Created with Sketch. 
<div class="parent">
  <div class="child"></div>
</div>
.parent {
  width: 30rem;
}

.child {
  width: 50%;
}

Hoe breed is .child?

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  width: 30rem;
}

.child {
  width: 200%;
}
question Created with Sketch.

Hoe breed is .child?

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  width: 100%;
}

.child {
  width: 50%;
}
question Created with Sketch.

Hoe breed is .child?

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  width: 50%;
}

.child {
  width: 20%;
}
question Created with Sketch.

Hoe breed is .child?

<div class="my-parent">
  <div class="my-child"></div>
</div>
.my-parent {
  width: 50%;
}

.my-child {
  width: 100vw;
}
question Created with Sketch.

Hoe breed is .child?

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  width: 50%;
}

.child {
  width: 100vw;
}
question Created with Sketch.

Hoe breed is .child?

Box backgrounds

Background-color

.my-box {
  background-color: red;
}

.my-box {
  background-color: hsl(50 33% 25%);
}

.my-box {
  background-color: #bbff00
}

We kunnen de achtergrond van een element opmaken door een kleur toe te voegen

  • hsl, hex, rgb...

Background-color

Background-image

.my-box {
  background-image: url("../images/cat.jpg");
}

.my-box {
  background-color: url("../images/cat.jpg"), url("../images/mouse.jpg");
}

We kunnen ook een achtergrond afbeelding toevoegen

  • Je legt de link naar de afbeelding via url ("...") en een pad
  • Je kan meerdere afbeeldingen tegelijk inladen, deze "stapelen"
    zich boven elkaar

Background-image

Background-size

.my-box {
  background-image: url("../images/cat.jpg");
  background-size: contain;
}

Eens er een achtergrond afbeelding is, kan je ook instellen wat de grootte van deze afbeelding is.

  • cover: schaalt de afbeelding om de volledige blok te vullen
  • contain: zorgt dat de volledige afbeelding zichtbaar is en dupliceert de afbeelding om de blok verder te vullen
  • numerieke waarde: geeft een grootte mee aan de afbeelding

Background-size

Background-repeat

.my-box {
  background-image: url("../images/cat.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

Hiermee stel je in of de afbeelding gedupliceerd mag worden

  • repeat: herhaalt de afbeelding (standaard)
  • no-repeat: herhaalt de afbeelding niet
  • repeat-x, repeat-y: herhaal enkel op de x-as of y-as
  • ...

Background-repeat

Background-position

Bepaalt de plaats van de afbeelding binnen de box

  • top, left, center: tov de box
  • numerieke waarde:  bepaalt x- of y-as
.my-box {
  background-image: url("../images/cat.jpg");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

Background-position

Background-attachment

Bepaalt of de afbeelding meescrollt of blijft staan

  • scroll: de afbeelding scrollt mee (standaard)
  • fixed: de afbeelding blijft staan
.my-box {
  background-image: url("../images/cat.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Background attachment

Background

Je merkt het al, we kunnen heel wat instellen voor een achtergrond afbeelding. We kunnen al deze instellingen groeperen in de background property

.my-box {
  background-image: url("../images/cat.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.my-box {
  background: url("../images/cat.jpg") cover no-repeat fixed;
}

Background

De instellingen die je kan groeperen in de background-property. Je hoeft niet al deze zaken een waarde te geven, maar je moet wel deze volgorde aanhouden:

Gradients

Met de background property kan je ook gradients toevoegen

  • Je geeft mee welke soort gradient: linear, radial..
  • Je kan een richting meegeven: to left, to right, 70deg...
  • Je kan 2 of meerdere kleuren meegeven
  • Je kan de hoeveelheid van de kleuren bepalen met color stops
.my-box {
  background: linear-gradient(#f69d3c, #3f87a6);
}

.my-box {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

Box-shadow

Box-shadow

Je kan een aantal waardes meegeven om een boxshadow te styles:

  • Afstand op de x-as: numerieke waarde in px, rem...
  • Afstand op de y-as: numerieke waarde in px, rem...
  • Blur: numerieke waarde in px, rem...
  • Spread: numerieke waarde in px, rem...
  • Kleur: hsl, hex, rgb...
  • Soort box-shadow: outset (standaard) of inset
.my-box {
  box-shadow: 0.4rem 0.4rem 1rem hsl(0, 15%, 19%);
}

Box-shadow

6. The box model

By Lecturer GDM

6. The box model

Block & inline boxes. The content box sizing. Padding, margin, border & Margin. Sizing Unites, box backgrounds & Styling the visual box.

  • 320

More from Lecturer GDM