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

Абсолютные единицы измерения имеют фиксированные значения и не зависят от других элементов на странице, они включают:

• px (пиксели)
• cm (сантиметры)
• mm (миллиметры)
• in (дюймы)
• pt (пункты)
• pc (пика)

.element {
/* ширина в сантиметрах */
width: 5cm;
/* высота в миллиметрах */
height: 50mm;
/* отступ в дюймах */
margin: 2in;
/* размер шрифта в пунктах */
font-size: 12pt;
}

Абсолютные единицы измерения, такие как px, cm, mm, in, pt и pc, полезны для печатных материалов, где размеры должны быть точными и постоянными. Однако в веб-дизайне они используются реже, так как экраны устройств могут иметь разные разрешения и размеры.

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

• % (проценты)
• em (эм)
• rem (рутовый эм)
• vw (процент ширины окна просмотра)
• vh (процент высоты окна просмотра)
• vmin (минимальный процент ширины или высоты окна просмотра)
• vmax (максимальный процент ширины или высоты окна просмотра)

.container {
/* ширина 50% от родительского элемента */
width: 50%;
}

.text {
/* размер шрифта в два раза больше, чем у родителя */
font-size: 2em;
}

.root-text {
/* жестко фиксированный размер */
font-size: 16px;
}

.child-text {
/* размер шрифта равен 16px */
font-size: 1rem;
}

.full-screen {
/* ширина 100% от ширины окна */
width: 100vw;
/* высота 100% от высоты окна */
height: 100vh;
}

Относительные единицы, такие как %, em, rem, vw, vh, vmin и vmax, более гибкие и адаптивные. Они позволяют создавать адаптивные макеты, которые подстраиваются под размеры окна просмотра и устройства пользователя.

Для задания углов вращения или наклона в CSS используются следующие единицы:

• deg (градусы)
• rad (радианы)
• grad (грады)
• turn (полные обороты)

.element {
/* поворот на 45 градусов */
transform: rotate(45deg);
}

.element-rad {
/* поворот на 0.785 радиан */
transform: rotate(0.785rad);
}

.element-grad {
/* поворот на 50 градов */
transform: rotate(50grad);
}

.element-turn {
/* поворот на пол-оборота */
transform: rotate(0.5turn);
}

Единицы измерения углов (deg, rad, grad, turn) и времени (s, ms) широко используются в анимациях и переходах для создания динамичных и интерактивных эффектов.

Для задания продолжительности анимаций и переходов в CSS используются следующие единицы:

• s (секунды)
• ms (миллисекунды)

.element {
/* переход длится 0.5 секунд */
transition: all 0.5s ease-in-out;
}

.animation {
/* продолжительность анимации 2000 миллисекунд */
animation-duration: 2000ms;
}

CSS также поддерживает другие единицы измерения, такие как:

• ch (ширина символа «0»)
• ex (высота символа «x»)
• cap (высота заглавных букв)
• ic (ширина идеографического символа)
• lh (высота строки)
• rlh (высота строки корневого элемента)
• q (четверть миллиметра)

.element {
/* ширина элемента равна ширине 10 символов "0" */
width: 10ch;
/* высота элемента равна высоте 2 символов "x" */
height: 2ex;
/* высота строки равна 1.5 высоты строки */
line-height: 1.5lh;
/* отступ в 1 четверть миллиметра */
padding: 1q;
}

Другие единицы измерения, такие как ch, ex, lh, и q, полезны для точной настройки размеров и отступов в зависимости от контекста и содержимого.