absolute vs relative
absolute - px
relative - %, v*, em, rem
(16px is the pixel that the browser provides default)
em
1em = 16px
for example,
parent > child
.parent{
font-size: 8em;
}
.child{
font-size: 0.5em;
}
parent font size - 16px * 8 = 128px
child font size - 128px(parent font size) * 0.5 = 64px
rem
root em
root = html
parent > child
.parent{
font-size: 8rem;
}
.child{
font-size: 0.5rem;
}
parent font size - 16px * 8 = 128px
child font size - 16px * 0.5 = 8px
Top comments (0)