Какие значения величин в CSS важны на практике и как их применять?

У свойств CSS бывают значения разных типов: длины, проценты, числа, цвета, ключевые слова и функции.

Типы значений

• Длины — 16px, 1.5rem, 100vh.
• Проценты — 50%; от чего считаются, зависит от свойства (ширина родителя, высота, размер самого элемента в transform).
• Числа без единиц — line-height: 1.5, flex-grow: 1, opacity: .8, z-index: 10.
• Цвета — #0066ff, rgb(), hsl(), oklch(), currentColor.
• Ключевые слова — auto, none, inherit, initial, unset.
• Функции — calc(), min(), max(), clamp(), var(), url().

.card {
  width: calc(100% - 2rem);
  line-height: 1.5;          /* лучше без единиц — наследуется пропорция */
  color: var(--text, #222);  /* переменная с запасным значением */
}

Нюансы

• line-height без единиц наследуется как множитель, а с px — как фиксированное значение.
• auto означает разное у разных свойств: для width блока — «на всю ширину», для margin — «поделить свободное место».

Коротко для собеседования

Значения бывают длинами, процентами, числами, цветами, ключевыми словами и функциями (calc, clamp, var); важно знать, от чего считаются проценты и что значит auto.

Подробнее: MDN — Значения и единицы