Les 4 Het Boxmodel

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Hoe sta je erin vandaag?

😒🙁😐🙂😃

Boxmodel en Positions

Wat weet je over CSS?

Leerdoel

• Aan het eind van de les kan de student met het Boxmodel pagina's stijlen.
• Aan het eind van de les kan de student elementen met css positioneren 

Inhoud

Het boxmodel

Inhoud van het boxmodel

positioneren

Wat is het boxmodel

Het Boxmodel is de manier waarop CSS de ruimte rondom en binnen HTML-elementen beheert.

Inhoud van het boxmodel

• Content: de inhoud van het element.
• Padding: ruimte tussen de inhoud en de rand.
• Border: rand om de padding en content heen.
• Margin: ruimte buiten de border die het element scheidt van andere elementen.

Inhoud van het boxmodel

Welke eigenschap behoort niet tot het boxmodel in CSS?

1. Margin
2. Padding
3. Font-size
4. Border

Wat gebeurt er als je box-sizing: border-box; toepast op een element?

1. De padding en border worden meegeteld in de totale breedte en hoogte.
2. Alleen de margin wordt meegeteld in de totale breedte en hoogte.
3. De padding en border worden niet meegeteld in de totale breedte en hoogte.
4. De margin wordt verwijderd en vervangen door extra padding.

Wat gebeurt er als twee elementen met margin-top: 20px; en margin-bottom: 30px; direct boven elkaar staan?

1. De totale afstand tussen de elementen is 50px.
2. De totale afstand tussen de elementen is 30px.
3. De totale afstand tussen de elementen is 20px.
4. De marges tellen niet mee en de elementen overlappen.

Wat:Maak een CSS-bestand waarin je drie boxen naast elkaar plaatst met verschillende margins, paddings en borders.

Hoe:

• Gebruik display: inline-block; om ze naast elkaar te zetten.
• Experimenteer met box-sizing: content-box;  border-box;.
• Gebruik background-color om de verschillende secties te onderscheiden.

Hulp: W3schools

Medestudent

Docent

Tijd: 10 minuten

Klaar:

Positioneren

 CSS biedt verschillende manieren om elementen op een pagina te positioneren:

• Static (standaard)
• Relative (relatief t.o.v. zichzelf)
• Absolute (t.o.v. het dichtstbijzijnde gepositioneerde ouder-element)
• Fixed (vaste positie t.o.v. het scherm)
• Sticky (tussen statisch en vast in, blijft plakken bij scrollen)

Wat is het standaard gedrag van een HTML-element als je geen position instelt?

1. Het wordt relatief gepositioneerd ten opzichte van zijn ouder
2. Het wordt absoluut gepositioneerd binnen de pagina
3. Het blijft in de normale documentstroom zonder verplaatsing
4. Het blijft altijd vast op zijn plek, zelfs bij scrollen

Wat gebeurt er als je position: absolute; instelt op een element?

1. Het wordt gepositioneerd ten opzichte van de eerstvolgende gepositioneerde ouder
2. Het wordt altijd ten opzichte van de body geplaatst
3. Het blijft op dezelfde plek in de viewport, zelfs bij scrollen
4. Het blijft in de normale documentstroom en verschuift iets

Waarom werkt position: sticky; soms niet zoals verwacht?

1. Het element moet binnen een position: relative; container staan
2. Het element heeft geen top, left, right of bottom waarde ingesteld
3. Een sticky element werkt alleen met position: absolute;
4. Sticky werkt alleen als het element ook z-index heeft

Wat: Je gaat een eenvoudige webpagina maken met vier gekleurde boxen die verschillende positioneringstechnieken gebruiken:

• Een vaste header (fixed)
• Een absoluut gepositioneerde box binnen een container (absolute & relative)
• Een sticky navigatiebalk (sticky)
• Een normale box zonder positionering (static)

Hoe:

• Gebruik HTML en CSS om een basislay-out te maken.
• Pas verschillende position-waarden toe (static, relative, absolute, fixed, sticky).
• Experimenteer met top, left, right, bottom om de positionering aan te passen.

Hulp: W3schools, Medestudent,Docent

Tijd: 10min

wat heb je vandaag allemaal gezien?

Wat is 1 dingen wat je nog niet helemaal snapt