--- sidebar_position: 7 --- # Единицы измерения в 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):** - Зависит от размера шрифта корневого элемента (``). - 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_**