The grid Property

a
a
a
adouble
a
a
a

The flex Property

RED...
BLUE
Green div with more content.
RED
half width
Green div with more content.
RED
BLUE
Full.

The box-sizing: border-box

No boxing but large padding
With boxing but large padding

float and clear

Without clear

div1
div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.


With clear

div3
div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".

Animation css

anim center

Positioning - relative then absolute, use flex to center hor/ver

Coffee

Like Font Awesome's icons, the relative sizing scale is created with modern browsers' default 16px font-size in mind and creates steps up/down from there.

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

list

+9 +1