Repository navigation
Layout in CSS
Normal flow of Flow Layout is de manier waarop block- en inline-elementen op een pagina worden weergegeven voordat er wijzigingen met CSS worden aangebracht.
Dat is wat je ziet als je “kale” HTML in de browser bekijkt, en als je gekleurde randen om verschillende elementen zou zetten. Elk element is een rechthoekige “box”. In Flow Layout staan block level boxen onder elkaar, en inline level boxen naast elkaar:
Onderzoek met je tafel welke elementen op fronteers.nl block level zijn en welke inline level. Gebruik de inspector om de CSS weg te gooien en laat met rode borders de block level elementen zien, en met blauwe borders de inline level elementen. (tip: border: 1px red solid)
Met CSS kun je met verschillende modes een layout kan maken. We onderscheiden 7 layout modes. :
- Flow Layout (Normal Flow)
- Grid Layout
- Flexible Box Layout (Flexbox)
- Positioned Layout (Relative, Absolute, Sticky, Fixed, Anchor)
- Float Layout
- Multi-column Layout
- Table Layout
Onderzoek met je tafel de verschillende Layout Modes in CSS, en schets op het whiteboard van elke mode een voorbeeld. (search tip: "mdn layout modes")
Om te oefenen met verschillende Layout Modes, hebben we de deeltaak “Layout in CSS” voor je klaargemaakt. Alles wat je hierin leert, kun je daarna toepassen in deze leertaak, voor je opdrachtgever.
Voer de Layout in CSS deeltaak uit, en ga door met de leertaak.