Единицы измерения в CSS. Полное руководство с примерами

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

Основные типы единиц измерения в CSS

1. Абсолютные единицы измерения

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

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

Пример использования абсолютных единиц измерения

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

2. Относительные единицы измерения

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

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

Для эффективного использования различных единиц измерения в CSS, необходимо прочное понимание как самого CSS, так и HTML. Без понимания структуры HTML и взаимодействия элементов невозможно грамотно применять различные единицы измерения. Если вы хотите углубить свои знания в HTML и CSS и научиться создавать красивые и функциональные веб-сайты, приходите на наш большой курс HTML и CSS. На курсе 212 уроков и 19 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Пример использования относительных единиц измерения

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

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

.root-text {
    font-size: 16px;
}

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

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

3. Единицы измерения углов

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

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

Пример использования единиц измерения углов

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

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

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

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

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

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

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

Пример использования единиц измерения времени

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

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

5. Другие единицы измерения

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

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

Пример использования других единиц измерения

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

Когда и как использовать различные единицы измерения

Абсолютные единицы измерения

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

Относительные единицы измерения

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

Единицы измерения углов и времени

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

Другие единицы измерения

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

Заключение

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

Выбор правильных единиц измерения в CSS является важным фактором для создания адаптивных и масштабируемых веб-сайтов. Для получения необходимых знаний и навыков, рекомендуем наш курс HTML и CSS. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир HTML и CSS прямо сегодня.