[css] How UNITS are converted from relative to absolute(px)

#1 Declaration

 

① Declared value

② Cascaded value

③ Specified value

④ Computed value

⑤ Used value (final calculation)

⑥ Actual value

 

root font-size -> 16px(Browser default)

section font-size -> 1.5rem -> computed: 16px * 1.5 = 24px(Inheritance)

 

 

#2 Inheritance

 

		Example(x)	How to convert to pixels	Result on pixels
	% (font)	150%	x% * parent's computed font-size(16px)	24px
	% (length)	10%	x% * parent's computed width(1000px)	100px
font-based	em (font)	3em	x% * parent's computed font-size(24px)	72px
	em (length)	2em	x% * current element computed font-size(24px)	48px
	rem	10rem	x% * root computed font-size(16px)	160px
viewed-based	vh	90vh	x * 1% of viewport height	90% of the current viewport height
	vw	80vw	x * 1% of viewport width	80% of the current  viewport width

 

 

• Each property has an initial value, used if nothing is declared(and if there is no inheritance)
• Browsers specify a root font-size for each page(usually 16px)
• Percentages are relative value are always converted to pixels
• Percentages are measured relative to their parent's font-size, if used to specify font-size
• Percentages are measured relative to their parent's width, if used to specify lengths
• em are measured relative to their parent font-size, if used to specify font-size
• em are measured relative to the current font-size, if used to specify length
• rem are always measured relative to the document's root font-size
• vh and vw are simply percentage measurements of the viewport's height and width