web/05

CSS Box Model

content, padding, margin, ...

Block elementen

Block elementen

  • Komt het meest voor
  • Nagenoeg alle elementen gedragen zich als block boxes.
  • bouwblokken die verticaal onder elkaar getoond worden

Block elementen

<p style="background: goldenrod">eerste</p>
<p style="background: tomato">tweede</p>
<p style="background: goldenrod">derde</p>

eerste

tweede

derde

Block elementen

Wil je dit box model aanpassen voor een bepaald element?

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

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

eerste tweede derde

Inline elementen

Inline elementen

Wordt standaard enkel gebruikt voor elementen die zich in de volgorde van tekst moeten gedragen:

  • <a>, <span>, <em>, <strong> en <img>

Inline elementen

<p style="background: goldenrod">
  eerste 
  <a href="..." style="background:tomato">tweede</a> 
  derde
</p>

eerste tweede derde

Inline elementen

Wil je dit box model aanpassen voor een bepaald element?

/* Dit is default voor een link element */
a {
  display: inline;
}

/* En hier passen we het aan */
.speciale-link {
  display: block;
}

eerste

tweede

derde

Reset CSS

Reset CSS

Verschillende browsers hebben verschillende standaarden van welke CSS ze zelf voorzien.

 

Dit kan je resetten door een "reset CSS" toe te voegen die deze browserverschillen zo goed mogelijk opvangt.

 

Er bestaan een hele boel van deze "reset css" variaties die je online kan vinden.

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;
}

css/

reset.css

Artevelde's Reset CSS

Dit bestand kan je steeds downloaden van www.gdm.gent/css

Box sizing model

Box sizing model

  • All properties will have an effect on block elements (display: block)
  • Not all properties will have an effect on inline elements (display: inline)

Box sizing model

<p class="first">Here is some content</p>
<p class="second">Here is some content</p>
.second {
  width: 6rem;
  height: 4rem;
  background: red;
  padding: 1rem;
}
.first {
  width: 6rem;
  height: 4rem;
  background: red;
}

Here is some content

Here is some content

Box sizing model

.first {
  width: 6rem;
  height: 4rem;
  background: red;
}
.second {
  width: 6rem;
  height: 4rem;
  background: red;
  padding: 1rem;
  border: 2px solid blue;
}

Here is some content

Here is some content

<p class="first">Here is some content</p>
<p class="second">Here is some content</p>

Box sizing model

.first {
  width: 6rem;
  height: 4rem;
  background: red;
}
.second {
  width: 6rem;
  height: 4rem;
  background: red;
  padding: 1rem;
  border: 2px solid blue;
  margin: 1rem;
}

Here is some content

Here is some content

<p class="first">Here is some content</p>
<p class="second">Here is some content</p>

Box sizing model

Here is some content

Content box

Padding box

Border box

Margin box

Box sizing model

Here is some content

Content box

Padding box

Border box

Margin box

Background-property beinvloedt alles behalve de margin.

.first {
  background: purple;
}

Om te excelleren

Box sizing model

Je kan de box-sizing switchen tussen content-box of border-box.

De browser zal de "width"- en "height"-properties renderen volgens de gekozen variant 

Box sizing model

Here is some content

Margin box

/* De blauwe container zal 6 rem breed zijn */
.first {
  /* Default door onze reset.css */
  box-sizing: border-box;
  
  width: 6rem;
  height: 3rem;
}

Content box

Padding box

Border box

Browser default

Default door onze reset.css

Om te excelleren

/* De rode container zal 6 rem breed zijn */
.second {
  /* Browser default */
  box-sizing: content-box;
  
  width: 6rem;
  height: 3rem;
}

Padding

Padding

Padding wordt voornamelijk gebruikt om witruimte te maken rondom tekst.

.my-div {
  padding: 2rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 2rem 2rem;
}

Padding

.my-div {
  padding: 2rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 2rem 2rem;
}

top        right   bottom    left

top

right

left

bottom

Padding

Here is some content

.my-div {
  padding: 1rem 0rem 4rem 2rem;
}

top       right   bottom    left

top

right

left

bottom

Padding

Here is some content

.my-div {
  padding: 1rem 3rem 1rem 3rem;
}

top        right   bottom    left

top

right

left

bottom

als top = bottom

en right = left

.my-div {
  padding: 1rem 3rem;
}

top       right  

bottom    left

Padding

.my-div {
  padding: 2rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 2rem 2rem;
}

top        right   bottom    left

top

right

left

bottom

Als alle 4 de values hetzelfde zijn

Padding

.my-div {
  padding-top: 2rem;
  padding-right: 2rem;
  padding-bottom: 10rem;
  padding-left: 2rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 10rem 2rem;
}

top        right    bottom     left

top

right

left

bottom

Padding

.my-div {
  padding: 2rem;
  padding-bottom: 10rem;
}

Here is some content

.my-div {
  padding: 2rem 2rem 10rem 2rem;
}

top        right    bottom     left

top

right

left

bottom

Padding

Border

Border

Border zal altijd rondom de padding weergegeven worden.

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

Here is some content

Border

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

Here is some content

Je kan ook een border bepalen aan 1 kant: 

Border

Je kan ook een border bepalen aan 1 kant: 

Border

Margin

Margin

Padding maakt ruimte binnen een element, margin maakt ruimte erbuiten  

Here is some content

.my-div {
  margin: 3rem;
}

Margin

Margins hebben een impact op waar het element staat ten opzichte van het vorige element of het parent element

Here is some content

Margin

Margin

De magische auto waarde: maximum!

Here is some content

.my-div {
  margin-left: auto;
}

Margin

De magische auto waarde

Here is some content

.my-div {
  margin-left: auto;
  margin-right: auto;
}

Margin

De magische auto waarde werkt vaak niet verticaal, omdat weinig elementen een vaste hoogte meekrijgen.

Ook werkt dit enkel op een voorspelbare manier met display: block elementen!

Width en height

Width en height

Block-elementen kan je een breedte en hoogte geven met css:

 

 

 

Elementen eisen standaard enkel de ruimte in die ze nodig hebben, met deze properties kan je dit gedrag dus beïnvloeden. 

.my-element {
  width: 20rem;
  height: 10rem;
}

Tip

Spring zuinig om met breedtes en hoogtes te vast te leggen, fout geplaatste breedtes en hoogtes kunnen al snel voor een onvoorspelbare resultaten zorgen.

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

Styling the visual box

Sizing units

Sizing units

Voor tekst: (reeds gezien)

  • rem

 

Voor elementen:

  • rem

  • % = 1% van de parent

  • vw = 1% van de viewport width

  • vh = 1% van de viewport height

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="my-parent">
  <div class="my-child"></div>
</div>
.my-parent {
  width: 30rem;
}

.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: 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;
}

Opdrachten @home

De vos

Frozen

Mario

freelance Created with Sketch.

Uitdaging

Pure CSS toggle

unicycle Created with Sketch.

(Enkel voor studenten met voorkennis)

DigExp - WEB/05 - CSS box model

By Lecturer GDM

DigExp - WEB/05 - CSS box model

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

  • 237

More from Lecturer GDM