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

Здравствуйте, будущие веб-дизайнеры! Сегодня мы отправимся в увлекательное путешествие по миру единиц измерения в CSS. Как ваш доброжелательный сосед-преподаватель компьютера, я здесь, чтобы провести вас через этот важный аспект веб-дизайна. Так что возьмите свои виртуальные линейки, и давайте измерим что-нибудь в CSS!

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

В CSS у нас есть различные способы измерения и определения размеров. Это как если бы у вас был ящик с инструментами, полными разных линейок, каждая из которых идеально подходит для конкретных задач. Давайте начнем с основ:

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

Это те, что просты, как дюймы на вашей линейке:

Единица	Описание
px	Пиксели
in	Дюймы
cm	Сантиметры
mm	Миллиметры
pt	Точки
pc	Пики

Вот простой пример:

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

В этом коде мы создаем ящик, который имеет ширину 100 пикселей, высоту 2 дюйма и отступы 10 миллиметров по всему периметру. Это как если бы вы строили маленькую, точную картонную коробку!

CSS Единицы измерения - единица 'em'

Теперь давайте поговорим о единице 'em'. Это относительная единица, основанная на размере шрифта элемента. Представьте ее как хамелеона, который изменяет размер в зависимости от своих surrounds.

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* Это будет 24px */
padding: 2em;     /* Это будет 48px */
}

В этом примере размер шрифта дочернего элемента в 1,5 раза больше, чем у родительского, а его отступы в два раза больше его собственного размера шрифта. Это как русская матрешка размеров!

CSS Единицы измерения - единица 'ch'

Единица 'ch' основана на ширине символа '0' (ноля). Она особенно полезна для создания column layouts в моноширинных шрифтах.

.code-block {
width: 80ch;
font-family: monospace;
}

Это создает блок кода, который имеет ширину 80 символов, идеально подходящий для тех, кто ностальгирует по дням 80-колоночных терминалов!

CSS Единицы измерения - единица 'rem'

'rem' означает "корневой em". Он похож на 'em', но всегдаrelative к корневому элементу (обычно

), а не к родителю.

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* Всегда 24px, независимо от родителя */
padding: 2rem;     /* Всегда 32px */
}

Это замечательно для поддержания постоянных размеров throughout ваш документ, как если бы у вас был мастер-план для всего вашего веб-сайта.

CSS Единицы измерения - единицы 'lh' и 'rlh'

'lh' означает "высота строки" элемента, а 'rlh' - "корневая высота строки". Это новые единицы, идеально подходящие для вертикального ритма в типографике.

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

Это устанавливает отступ снизу абзаца точно в одну высоту строки, создавая гармоничный вертикальный ритм. Это как дирижирование оркестром текста!

CSS Единицы измерения - единицы 'vh' и 'vw'

'vh' и 'vw' означают "высота окна просмотра" и "ширина окна просмотра" соответственно. Они являются процентными единицами, основанными на размере окна просмотра.

.hero {
height: 100vh;
width: 100vw;
}

Это создает heroesect, который всегда Fill весь экран, независимо от размера устройства. Это как если бы у вас был адаптивный рекламный щит, который всегда идеально fitting!

CSS Единицы измерения - единицы 'vmin' (минимальный размер окна просмотра) и 'vmax' (максимальный размер окна просмотра)

Эти единицы основаны на меньшем или большем размере окна просмотра, whichever مناسب.

.square {
width: 50vmin;
height: 50vmin;
}

Это создает perfect square, который всегда составляет половину размера меньшего окна просмотра. Это как shape-shifting square, который всегда looks proportional!

CSS Единицы измерения - единица 'vb'

'vb' означает "размер блока окна просмотра". Он похож на 'vh', но он уважает writing mode документа.

.sidebar {
width: 20vb;
}

Это создает sidebar, который всегда составляет 20% от размера блока окна просмотра, что很好 для multilingual сайтов с различными направлениями writing.

CSS Единицы измерения - единица 'vi'

'vi' означает ".inline размер окна просмотра". Он похож на 'vw', но снова, он уважает writing mode.

.header {
height: 10vi;
}

Это создает header, который всегда составляет 10% от .inline размера окна просмотра, адаптируясь к различным направлениям writing seamlessly.

Пример - Проценты

Проценты в CSS всегда relative к чему-то. Давайте посмотрим, как они работают:

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

Здесь контейнер составляет 80% ширины своего родителя, centered с auto отступами. Дочерний элемент составляет половину ширины контейнера, с отступами 5% от ширины контейнера. Это как Russian nesting dolls, но с невидимыми коробками!

Пример - Числа

Иногда свойства CSS не требуют единиц вообще. Давайте посмотрим на несколько примеров:

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

Здесь opacity - это значение между 0 и 1, line-height - это multiplier шрифта, а z-index - это просто число для порядка стека. Это как если бы у вас был volume knob, text spacer и layer sorter все в одном!

И вот мы и arrived, folks! Мы совершили путешествие через страну единиц измерения в CSS, от знакомых пикселей до экзотических единиц окна просмотра. Помните, выбор правильной единицы - это как выбор правильного инструмента для работы - он может упростить вашу жизнь и сделать ваши дизайны более robust. Так что идите вперед и измеряйте ответственно!

Credits: Image by storyset