CSS Units

Question 1

Can whitespace appear between a number and its unit?

Answer 1

No, must be continuous
60px
2rem
etc.

Question 2

What are the absolute lengths in CSS?

Answer 2

pixels px : 1/96th of an inch

points pt : 1 /72nd of an inch

pica pc : 1/6th of an inch [12 points, 16 pixels]

inch. in : 96 pixels, 72 points, 6 picas, 2.54cm

millimeters, centimeters [ mm, cm ]
Q : quarter-millimeters

Question 3

What is 2% ?

Answer 3

A unit that is 2% “relative” to the parent element

Question 4

What is { font-size: 2em; }?

Answer 4

A unit that will be 2x the font-size of it’s parent declaration.
**can cascade and cause unexpected results
“em” element

Question 5

What is { font-size: 1.5rem; }?

Answer 5

A unit that is 1.5x times the size of the root element
**more consistent than “em”
“rem” root element html element or :root

16px is the default root font-size, media queries will always refer to this.

Question 6

what are lh and rlh

Answer 6

Line height and root line height

Question 7

What are vw and vh?

Answer 7

1% of the viewport-width and viewport-height respectively

10vw would be 10% of the viewport-width

small viewport { svw, svh }
large viewport { lvw, lvh }
dynamic { dvw, dvh }

Question 8

vb vs vi

Answer 8

vb is a unit relative to the containing block towards the root element’s block axis

vi is a unit relative to the containing block on the inline axis