Compare absolute and relative length units. When do you reach for rem over em, and what does % resolve against?
Whether you understand what each unit is relative TO — the source of most sizing surprises.
px is an absolute, device-independent pixel — predictable but ignores user font-size preferences. Relative units scale: em is relative to the element's own font-size (and COMPOUNDS when nested — nested ems multiply, which surprises people); rem is relative to the ROOT font-size, so it stays flat and predictable no matter the nesting — the reason rem is the default choice for typography and spacing in scalable designs. % resolves against different things per property: width/left against the containing block's width, height against its height (only if the parent has an explicit height), and font-size against the parent's font-size. Viewport units are relative to the viewport: 1vw = 1% of width, 1vh = 1% of height, with vmin/vmax for the smaller/larger axis; great for hero sections and fluid type (often via clamp()). ch (width of '0') and ex are font-relative and handy for line lengths. Rule of thumb: rem for type and spacing (respects user zoom), % or fr for layout widths, viewport units for full-screen sections, px only for hairline borders and things that truly shouldn't scale.
Accessibility-friendly sizing (rem so text respects zoom), fluid layouts (%, vw), and avoiding compounding surprises from nested em.