|
1 inline-block [3 boxes in ONE row]
2 float:left [3 boxes in ONE row]
3 display:table-cell [3 boxes in ONE row]
4 width:300px, child width:50% [white = HALF of grey]
5 max-width:100px (width:300px) [yellow = grey ref]
6 box-sizing:border-box, width:100px+padding [yellow = grey ref]
7 position:absolute; left:50% [red tick in the MIDDLE]
8 overflow:hidden (100px box, 300px child) [green cut at 100px]
9 position:fixed [red FIX tag in the screen's bottom-right corner]
FIX 10 flex (-webkit-box / flex) [3 boxes in ONE row]
|
11 grid [3 boxes in ONE row]
12 calc(150px) [bar is 150px if supported, else 300px]
13 var(--w) [150px if supported, else 300px]
14 25vw [240px if supported, else 300px]
15 10rem [160px if supported, else 300px]
16 opacity / rgba / radius / shadow / rotate [faded | translucent | rounded | red shadow | tilted]
17 linear-gradient [smooth red to blue]
18 Persian text [letters JOINED]
همراهنگ تیوی — سلام دنیا 19 direction:rtl [text at RIGHT edge: Hamrahang, then Persian, then 123]
Hamrahang سلام 123 20 HOW styles can be set from JavaScript [6 bars in order: red=cssText, orange=style.width.., magenta=setAttribute, green=className, cyan=style element, blue=innerHTML. A MISSING bar = that method FAILED]
|