HTML en CSS - document flow en box model

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

• Je weet wat een class is en wanneer je deze toe kan passen
• Je bent bekend met het box model: je kan margins en paddings gebruiken om de layout van een pagina aan te passen

Die "div p" in het stukje css noemen we een ...

selector

Die "div p" in het stukje css noemen we een ...

1. paragraph
2. division paragraph
3. selector
4. class

Welke kleur heeft de p in de div?

Welke kleur heeft de p in de div?

https://codepen.io/timmiekun/pen/YRaNjy

1. blauw
2. oranje
3. groen
4. rood

https://timmiekun.github.io/html-css-lesson/document_flow.html

Box model:

voorbeeld:

https://codepen.io/anon/pen/JrZzbz

Box model

Lees meer

https://htmldog.com/guides/css/beginner/margins/

Classes

https://htmldog.com/guides/css/intermediate/classid/

Wat gebeurt er als .box1 de volgende property krijgt:

padding-left: 20px

Wat gebeurt er als .box1 de volgende property krijgt:
padding-left: 20px

https://codepen.io/timmiekun/pen/JwGyjg

1. .box1 wordt 20px breder
2. .box1 schuift 20px naar links
3. .box1 schuift 20px naar rechts

Document flow

Document flow is de manier waarop elementen gepositioneerd worden.  We kijken even naar dit voorbeeld:

https://timmiekun.github.io/html-css-lesson/document_flow.html

Display: inline

Probeer je je element breedte en hoogte te geven maar "hij doet het niet" ? Dan is het vermoedelijk een inline element. Inline elementen kan je geen breedte en hoogte geven; ze worden gevuld op basis van de inhoud en komen achter elkaar te staan.

Resume

https://timmiekun.github.io/html-css-lesson/document_flow.html

Display: block

Als je iets met layout wil doen doe je dat doorgaans met elementen die display:block hebben. Block elementen kan je een breedte en hoogte geven en beginnen standaard op een nieuwe regel

Display: flex

Om je layout te fixen :)

Wat hebben jullie vandaag geleerd?