CSS Boxmodel

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

Content box sizing

The content box sizing

The default box sizing (ref)

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

The content box sizing

.first {
  width: 6rem;
  height: 3rem;
  background: red;
}
<div class="first"></div>
<div class="second"></div>
.second {
  width: 3rem;
  height: 3rem;
  background: red;
}

Here is some content

Here is some content

The content box sizing

.first {
  width: 6rem;
  height: 3rem;
  background: red;
}
<div class="first"></div>
<div class="second"></div>
.second {
  width: 6rem;
  height: 3rem;
  background: red;
  padding: 1rem;
}

Here is some content

Here is some content

The content box sizing

.first {
  width: 6rem;
  height: 3rem;
  background: red;
}
<div class="first">Here is some content</div>
<div class="second">Here is some content</div>
.second {
  width: 6rem;
  height: 3rem;
  background: red;
  padding: 1rem;
  border: 2px solid blue;
}

Here is some content

Here is some content

The content box sizing

.first {
  width: 6rem;
  height: 3rem;
  background: red;
}
<div class="first">Here is some content</div>
<div class="second">Here is some content</div>
.second {
  width: 6rem;
  height: 3rem;
  background: red;
  padding: 1rem;
  border: 2px solid blue;
  margin: 1rem;
}

Here is some content

Here is some content

The content box sizing

Here is some content

Content box

Padding box

Border box

Margin box

The content box sizing

Here is some content

Content box

Padding box

Border box

Margin box

Default

Ook vaak gebruikt

.first {
  /* default */
  box-sizing: content-box;
  
  width: 6rem;
  height: 3rem;
}

De content box zal 6rem x 3rem zijn

Andere box sizing

Here is some content

Content box

Padding box

Border box

Margin box

Default

Ook vaak gebruikt

.first {
  /* pas de default box siwing aan. */
  box-sizing: border-box;
  
  width: 6rem;
  height: 3rem;
}

De border box zal 6rem x 3rem zijn

Tip:

Here is some content

Content box

Padding box

Border box

Margin box

Background kleurt altijd de content-box + padding-box ongeacht welke box-sizing je kiest

.first {
  background: purple;
}

Padding

Padding

padding bepaalt de padding-box bovenop de width en height.

.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

top = bottom = right = left

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 wordt bovenop de content-box en padding-box toegevoegd

.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!

Oefening @Campus

Canvas test: Box model visuele afmetingen

programming Created with Sketch.

Sizing unit

Sizing units

Voor tekst: (reeds gezien)

  • rem
  • px

Sizing units

Voor elementen: %

Sizing units

Here is some content

.my-div {
  width: 100%;
}

Voor elementen: %

Sizing units

De % waarde is altijd afhankelijk van de waarde van de parent.

Sizing units

De % waarde is altijd afhankelijk van de waarde van de parent.

Hoe breed is .my-child?

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

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

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

Sizing units

Voor elementen: vw & vh

1vw = 1% van de viewport width

1vh = 1% van de viewport height

 

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)

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

Web Technology - 05 - The CSS box model

By Evelien Rutsaert

Made with Slides.com

Web Technology - 05 - The CSS box model

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

  • 261

More from Evelien Rutsaert