"Box Model" & "DIV"-ek CSS3 "DISPLAY" > 16 a 20-ból teszt (Kimaradt: run-in, none, initial, inherit)

Childs-bal: display=list-item, list-style-image=képfájl & Childs-jobb: display=list-item, list-style-type=square

list-item (this div)

table + 8 (this p)

inline-table (this span)

flex (this h1)

block (this div)

inline-block (this p)

inline (this span)

w3c box model page (this h1)



Parent: display=table & Childs: display=caption, colgroup, col, thead, tbody, tfoot, tr, td

Ez egy tábla CAPTION eleme
THEAD > Oszlop-1
THEAD > Oszlop-2
THEAD > Oszlop-3
TBODY > TD-11
padding=10/30
vertical-align=top
TBODY > TD-12
TBODY > TD-13
TBODY > TD-21
TBODY > TD-22
padding=10/30
vertical-align=middle
TBODY > TD-23
TBODY > TD-31
TBODY > TD-32
TBODY > TD-33
padding=10/30
vertical-align=bottom
TFOOT > td-1
TFOOT > td-2
TFOOT > td-3

Parent: display=inline-table & Childs: display= colgroup, col, thead, tbody, tr, td

Elmegyünk a piacra, hogy vegyünk egy kiló almát lepénysütéshez. Körbenézünk az árak és minőség terén és közben hat ránk a reklám.
Reklám >  
Vásárolt kg
Kilogramonkénti ár
Fizetendő összeg
Egy kg
350 Ft
350 Ft
Öt kg
250 Ft
1250 Ft
Tíz kg
150 Ft
1500 Ft
  hatása az egységárra és a pénztárcánkra...
A végén, hogy "nyerjünk" is veszünk 10 kg almát, majd jó lesz később is valamire. Ha meg elromlik mert nem fogy el, "kidobjuk"...
Kérdés: Érdemes venni a szükséges 1 kg (350Ft) helyett 10 kilogramot (1500Ft)?

Parent: display=flex, width=NINCS, height=100 & Childs: flex= 2, 3, 1, margin=10, padding=5

flex=2
border=10
flex=3
border=15
flex=1
border=5
flex=2
border=10
flex=3
border=15
flex=1
border=5

Parent: display=inline-flex, width=NINCS, height=100 & Childs: flex= 2, 3, 1, margin=10, padding=5

Akár egy szövegsor   
flex=2
border=10
flex=3
border=15
flex=1
border=5
flex=2
border=10
flex=3
border=15
flex=1
border=5
   része is lehet...

&
Akár egy szövegsor   
flex=2
border=10
flex=3
border=15
flex=1
border=5
flex=2
border=10
flex=3
border=15
flex=1
border=5
   része is lehet...


Parent: display=block, width=900, height=180 & Childs: dipslay=block, 90*90px méretű, float=left

padding=5
border=5
margin=5
padding=10
border=10
margin=10
padding=15
border=15
margin=15
padding=5
border=5
margin=5
padding=10
border=10
margin=10
padding=15
border=15
margin=15

Parent: display=inline-block, width=900, height=NINCS & Childs1-3: display=inline-block, 90*90px méretű & Childs4-6: display=inline-block, width / height=NINCS

padding=5
border=5
margin=5
padding=10
border=10
margin=10
padding=15
border=15
margin=15

padding=5
border=5
margin=5
padding=10
border=10
margin=10
padding=15
border=15
margin=15



Parent: display=inline-block, width=860, height=NINCS, line-height=110 & Childs: display=inline, width= NINCS, height / line-height=90

padding=5, border=5, margin=5
padding=10, border=10, margin=10
padding=15, border=15, margin=15
padding=5, border=5, margin=5
padding=10, border=10, margin=10
padding=15, border=15, margin=15