В чем разница между величинами в CSS

px – абсолютные пиксели, жестко фиксированный размер.
em – относительная величина, зависит от размера шрифта родителя.
rem – тоже относительная, но всегда от размера шрифта html (корня).
% – процент от размера родительского элемента.
vw/vh – процент от ширины/высоты viewport.
ch – ширина символа "0" в текущем шрифте.

Пример:

.parent { font-size: 20px; }
.child-em { font-size: 1.5em; } /* 30px (1.5 × 20px) */
.child-rem { font-size: 1.5rem; } /* 24px (если html font-size: 16px) */
.box { width: 50vw; } /* 50% ширины окна */

Ключевое:

• em каскадируется, rem – нет.
• Проценты зависят от контекста (ширина/высота/шрифт).
• Viewport-единицы динамичны при изменении окна.