Единицы измерения

В CSS к числу почти всегда пишут единицу измерения: иначе браузер не знает, это пиксели, проценты или что-то ещё.

Размеры

Это длины: ширина, высота, отступ, кегль. Фиолетовым помечены ломкие или почти неиспользуемые единицы: em, svh / lvh. dvh к ним не относится: им чинят высоту на телефоне.

На компьютере vh, svh, lvh и dvh часто совпадают. На телефоне шапка «на весь экран» на 100vh может уехать под нижнюю панель.

Пиксель

Пиксель не наследуется как множитель: 24px внутри 24px остаётся 24.

<div style="font-size: 24px">
  Съешь ещё этих мягких французских булок
  <div style="font-size: 24px">да выпей чаю</div>
</div>

Проценты

% относительны. У шрифта 150% = полтора шрифта родителя, поэтому вложенные блоки тоже растут.

<div style="font-size: 150%">
  Съешь ещё этих мягких французских булок
  <div style="font-size: 150%">да выпей чаю</div>
</div>

width: 50% это половина коробки родителя, не шрифта. width: 2em это два кегля текущего текста. Одинаковая цифра, разная база.

Относительно шрифта элемента

1em = текущий кегль. Исторически так задавали отступ «как одна строка текста»: padding: 1em. Если тот же трюк повесить на font-size вложенных списков, каждый уровень умножает предыдущий. На курсе это не используем: ту же роль без ловушки даёт rem.

<div style="font-size: 1.5em">
  Съешь ещё этих мягких французских булок
  <div style="font-size: 1.5em">да выпей чаю</div>
</div>

Вложенный список. Правило на li { font-size: 1.2em } срабатывает на каждом уровне. Пять вложений: 1.2⁵.

<style>
  .pack li {
    font-size: 1.2em;
  }
</style>
<ul class="pack">
  <li>
    Съешь ещё
    <ul>
      <li>
        этих мягких
        <ul>
          <li>
            французских булок
            <ul>
              <li>
                да выпей
                <ul>
                  <li>чаю</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Относительно шрифта страницы

rem (root em) смотрит на html. Вложенность блоков его не умножает. Меняете кегль на корне, меняется вся страница.

html {
  font-size: 100%;
}
.lead {
  font-size: 1.25rem;
}

Окно браузера

Viewport = видимая область страницы в окне браузера, не весь документ.

• vh = viewport height, высота этой области. 1vh = 1% высоты.
• vw = viewport width, ширина. 1vw = 1% ширины.

На телефоне 100vh часто включает зону под панелью адреса: блок «на весь экран» уезжает вниз.

• svh = small viewport height, малое окно (панель на месте).
• lvh = large viewport height, большое окно (панель спрятана).
• dvh = dynamic viewport height, живое: растёт и сжимается, пока панель едет.

.hero {
  min-height: 100dvh;
}
.hero-stable {
  min-height: 100svh;
}

Углы

Нужны для transform: rotate(), линейного и конического градиента.

• deg = degree, градус. Полный круг = 360deg. В школьной тригонометрии 0° справа на оси x, угол против часовой. В CSS 0deg смотрит вверх (ось y), угол по часовой.
• grad = gradian, град. Полный круг = 400grad. Редко встречается.
• rad = radian, радиан. Полный круг = 2π ≈ 6.2832rad. В CSS почти не пишут руками.
• turn = turn, оборот. Полный круг = 1turn. Четверть оборота = 0.25turn = 90deg.

.card {
  transform: rotate(45deg);
}
.card-turn {
  transform: rotate(0.125turn);
}

Оба квадрата повёрнуты на 45°. На курсе достаточно deg и иногда turn.

Время

Для transition и animation.

• s = second, секунда. transition: 0.2s.
• ms = millisecond, миллисекунда. 200ms = 0.2s.

.button {
  transition: background-color 200ms ease;
}

Что выбрать