115 lines
7.1 KiB
Markdown
115 lines
7.1 KiB
Markdown
---
|
||
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_** |