---
sidebar_position: 8
---

# Единицы измерения в CSS

В CSS существует множество единиц измерения, которые используются для задания размеров, отступов, шрифтов и других свойств элементов. Эти единицы можно разделить на несколько категорий: **абсолютные**, **относительные** и **специальные**.

- **Абсолютные единицы** (например, `px`, `in`) используются для фиксированных размеров.
- **Относительные единицы** (например, `em`, `rem`, `%`, `vw`, `vh`) помогают создавать адаптивные и гибкие макеты.
- **Специальные единицы** (например, `deg`, `s`, `Hz`) используются для трансформаций, анимаций и других специфических задач.

## Абсолютные
Абсолютные единицы фиксированы и не зависят от других параметров, таких как размер экрана или шрифта. Они используются реже, так как не всегда подходят для создания адаптивных макетов.

**Основные абсолютные единицы:**
- `px` **(пиксели):**
  - Наиболее распространенная единица.
  - 1px соответствует одному пикселю на экране.
  - Пример: `width: 200px;`.
- `in` **(дюймы):**
  - 1in = 2.54cm.
  - Используется редко, в основном для печати.
  - Пример: `width: 2in;`.
- `cm` **(сантиметры):**
  - Используется для печати.
  - Пример: `width: 5cm;`.
- `mm` **(миллиметры):**
  - Используется для печати.
  - Пример: `width: 50mm;`.
- `pt` **(пункты):**
  - 1pt = 1/72 дюйма.
  - Часто используется для печати.
  - Пример: `font-size: 12pt;`.
- `pc` **(пики):**
  - 1pc = 12pt.
  - Используется редко.
  - Пример: `font-size: 1.5pc;`.

## Относительные

Относительные единицы зависят от других параметров, таких как размер шрифта или размер родительского элемента. Они чаще используются для создания адаптивных и гибких макетов.

**Основные относительные единицы:**
- `em`:
  - Зависит от размера шрифта текущего элемента.
  - 1em = текущий размер шрифта.
  - Если размер шрифта элемента равен 16px, то `2em = 32px`.
  - Пример: `font-size: 1.5em;`.
- `rem` **(root em):**
  - Зависит от размера шрифта корневого элемента (`<html>`).
  - 1rem = размер шрифта корневого элемента (обычно 16px).
  - Пример: `font-size: 1.2rem;`.
- `%` **(проценты):**
  - Зависит от размера родительского элемента.
  - Пример: `width: 50%;` (ширина элемента будет 50% от ширины родителя).
- `vw` **(viewport width):**
  - 1vw = 1% ширины области просмотра (viewport).
  - Пример: `width: 50vw;` (ширина элемента будет 50% от ширины окна браузера).
- `vh` **(viewport height):**
  - 1vh = 1% высоты области просмотра (viewport).
  - Пример: `height: 100vh;` (высота элемента будет равна высоте окна браузера).
- `vmin`:
  - 1vmin = 1% от меньшего из размеров (ширины или высоты) области просмотра.
  - Пример: `font-size: 5vmin;`.
- `vmax`:
  - 1vmax = 1% от большего из размеров (ширины или высоты) области просмотра.
  - Пример: `font-size: 5vmax;`.
- `ch`:
  - Зависит от ширины символа "0" текущего шрифта.
  - Пример: `width: 20ch;` (ширина элемента будет равна ширине 20 символов "0").
- `ex`:
  - Зависит от высоты символа "x" текущего шрифта.
  - Используется редко.
  - Пример: `font-size: 2ex;`.

## Специальные единицы измерения
Эти единицы используются для специфических задач, таких как работа с цветами или углами.

- `deg` **(градусы):**
  - Используется для задания углов (например, в трансформациях).
  - Пример: `transform: rotate(45deg);`.
- `rad` **(радианы):**
  - Используется для задания углов в радианах.
  - Пример: `transform: rotate(1rad);`.
- `turn` **(обороты):**
  - 1turn = 360deg.
  - Пример: `transform: rotate(0.5turn);`.
- `s` **(секунды)** и `ms` **(миллисекунды):**
  - Используются для задания времени (например, в анимациях).
  - Пример: `transition: all 0.5s;`.
- `Hz` **(герцы)** и `kHz` **(килогерцы):**
  - Используются для задания частоты (например, в анимациях).
  - Пример: `animation: pulse 2Hz;`.

## Единицы для работы с цветами
- `rgb()` и `rgba()`:
  - Задают цвет в формате RGB (Red, Green, Blue) с возможностью указания прозрачности.
  - Пример: `color: rgba(255, 0, 0, 0.5);`.
- `hsl()` и `hsla()`:
  - Задают цвет в формате HSL (Hue, Saturation, Lightness) с возможностью указания прозрачности.
  - Пример: `background-color: hsla(120, 100%, 50%, 0.3);`.
- **Шестнадцатеричные значения**:
  - Задают цвет в формате HEX.
  - Пример: `color: #ff0000;`.

### Когда какие единицы использовать?
- `px`: Для фиксированных размеров (например, границы, тени).
- `em` и `rem`: Для размеров шрифтов и отступов, чтобы обеспечить масштабируемость.
- `%`: Для создания адаптивных макетов (например, ширина элемента).
- `vw` и `vh`: Для создания полноэкранных блоков или адаптивных шрифтов.
- `ch`: Для работы с текстом (например, ограничение ширины текстового поля).
- `deg`, `rad`, `turn`: Для трансформаций и анимаций.

🚀 **_Источник: DeepSeek_**