html/css - document flow

• Informatica
• Middelbare school
• vwo
• Leerjaar 4,5

Document Flow

• Je kent de verschillen tussen block en inline display types en hoe je deze kan/moet gebruiken
  
• Je weet hoe je een float kan gebruiken
  
• Je kan een element positioneren m.b.v. de position eigenschap (css property)
• Je kan bovenstaande toepassen om zo tot je zelf ontworpen layout in html en css te maken

Document flow

Gaat over hoe html elementen zich positioneren en hoe je daar m.b.v. css visuele aanpassingen aan kan maken.

Document flow

• Display types
• Floats
• Position

Display:block

• Beslaat de volledige breedte
• heeft width, height, margin en padding
• voorbeelden: div, p, h1, form, article

Display:block

• beslaat de volledige breedte
• heeft width, height, margin en padding
• Voorbeelden: div, p, h1, form, article

Display:inline

• past zich aan aan de inhoud
• geen width of height
  
• geen padding-top of padding-bottom
• Voorbeelden: div, p, h1, form, article

Display:inline

• past zich aan aan de inhoud
• geen width of height
  
• geen padding-top of padding-bottom
• Voorbeelden: div, p, h1, form, article

Float:left

• Element "zweeft" links of rechts
• Flexibele breedte

Float:left

• Element "zweeft" links of rechts
• Flexibele breedte

Float:left

• Kan over andere elementen heen vallen

Float:left + clear:both

• Kan over andere elementen heen vallen
• op te lossen met clear:both

Position:relative

• Positioneren vanuit positie in de flow
• Duwt andere element niet opzij

Position:absolute

• Positioneren vanuit bovenliggende element in de html
• Negeert andere elementen

Position:absolute

• Positioneren vanuit bovenliggende element in de html
• Negeert andere elementen

1. Zet de items van deze lijst naast elkaar
2. Zorg dat de items niet tegen elkaar aan staan

https://repl.it/@TimLogtenberg/document-flow

Opdracht

Opdracht

1. Leg uit: wat doet position:fixed ?

2. Wat is er anders dan position:absolute?

https://repl.it/@TimLogtenberg/ict-website

Opdracht

Opdracht

Positioneer het menu met position:absolute in plaats van float:left;

https://repl.it/@TimLogtenberg/ict-website

Opdracht

Bekijk deze pagina over default browser styles en beantwoord de volgende vragen

• welke font-grootte heeft een h1 standaard?
• waar hebben we default browser styles in deze les gezien?
• leg uit waarom je wel of geen last kan hebben van default browser styles

Huiswerk vrijdag

Rondje presenteren

Wat heb je vandaag geleerd?

Wat vonden jullie van deze les?

Bronnen

• https://github.com/lgg-maartens/document-flow
• https://github.com/lgg-maartens/document-flow/tree/inline
• https://github.com/lgg-maartens/document-flow/tree/float
• https://github.com/lgg-maartens/document-flow/tree/position