The boxmodel

WIP

WEB ESSENTIALS

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 heer 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 - beslissingsboom

  • rem: Voor tekst of witruimtes relatief t.a.v. font-grootte
  • %: Voor afmetingen die relatief zijn ten aanzien van de afmetingen van de parent
  • vw of vh: voor afmetingen die relatief zijn ten aanzien van de viewport width of viewport height afmetingen.
    Beter nog: dvh en dvw = dynamic viewport width / height
  • px: Enkel indien het niets met font-grootte te maken heeft. Vermijden waar mogelijk.

Sizing units

Als je 3 children van dezelfde parent elk met een andere unit zou breder maken, zou dit er zo gaan uitzien:

Hoe breed is .my-child?

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

.child {
  width: 50%;
}

Hoe breed is .my-child?

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

.my-child {
  width: 200%;
}

Hoe breed is .my-child?

question Created with Sketch. 
<div class="my-parent">
  <div class="my-child"></div>
</div>
.my-parent {
  width: 100%;
}

.my-child {
  width: 50%;
}

Hoe breed is .my-child?

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

.my-child {
  width: 20%;
}

Hoe breed is .my-child?

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

.my-child {
  width: 100vw;
}

Hoe breed is .my-child?

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

.my-child {
  width: 100vw;
}

Box backgrounds

Box backgrounds

Box backgrounds

Box backgrounds

Box backgrounds

Box backgrounds

Box backgrounds

Box backgrounds

Oefening @Campus

A winter night in the forest

programming Created with Sketch.

Styling the visual box

Styling the visual box

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.

  • 25

More from Lecturer GDM