Revision_009 Boxmodel

Simple basic HTML/CSS Revision 001

  • em = relative to rootelement <-> rem relative to rootelement parent (IE ?)
  • vw = 1% total viewwidth
  • vmin = smallest value vh & vw
  • vmax = max value vh & vw

/* to do opzoeken cheatsheet css selectors

/* create image boxmodel

Het Boxmodel

Het Blokmodel : een samenvatting

Het Weergavemodel

Display : inline-element <-> blokelement

vb List item
standaard : display = list-item
block : list items verliezen opmaak
inline : lijst gaat horizontaal w en h kunnen niet aangepast in css
inline- block: lijst gaat horizontaal w en h kunnen niet aangepast in css

Andere waarden van DISPLAY :

https://www.w3schools.com/cssref/pr_class_display.asp

http://www.gdm.gent/1718-webtech1/week-07/styling/

Positionering

Positioneringsschema -> 3

  1. Normal Flow : volgorde wordt bepaald door volg in HTML en eigenschappen Inline of Block
  2. Floats : zwevend blok dat eerst volgens volgorde wordt geplaatst, daar wordt uitgehaald en links of rechts wordt geplaatst.
  3. Absolute positioning : Volledig uit de flow gehaald, krijgt positie toegewezen in omvattende blok !!!

Position

  1. static (standard) = all values are auto.
  2. relative = waarden geven verschuiving weer tov originele positie in de flow
  3. absolute = waarden geven verschuiving weer tov containing block !!!
  4. fixed = waarden tov top dom = browserwindow

Values : Wanneer een element != static, wordt de plaats of verschuiving aangegeven met volgende vier waardes. top/// right/// bottom/// left

clear : om te voorkomen dat een niet-gefloat blok naast een gefloat blok terecht komt, wordt aan het niet floatende blok clear-left, clear-right of clear-both toegevoegd.

To do : clearfix !

In het voorbeeld worden twee kolommen (width 50%) elk floatend naar links in een omvattende div gezet. Aangezien de kolommen uit de normale flow verdwenen zijn (float), denkt de div dat hij leeg is en klapt in elkaar, waardoor kolommen onder omvattende div komen.
Oplossing : .clearfix::after { content:””; display: table; clear:both; }
div class=”container clearfix”> <!– voeg klasse clearfix toe –>