Загрузка...

Единицы в CSS

Вы уже умеете писать объявление вроде color: teal. Свойствам размера нужна вторая идея: насколько большой. Одно font-size: 16 недопустимо для большинства длин — браузеру нужна единица, чтобы понять, что значит «16».

Что такое единицы CSS?

Единицы CSS — это окончания измерения у значений длины — например px, rem, %, vw и vh. Абсолютные единицы сохраняют один размер независимо от родителя. Относительные масштабируются от чего-то ещё: шрифта элемента, корневого шрифта, размера родителя или viewport.

Абсолютные и относительные одним взглядом

Используйте эту таблицу как карту. Не нужна каждая единица в первый день — изучите семейства, затем практикуйте повседневные.

📊 Частые единицы длины CSS

Единица Семейство Типичное применение
px Абсолютная (пиксели экрана) Рамки, тонкая подстройка иконок, линии 1px
rem Относительно корневого размера шрифта Текст страницы и согласованные отступы
em Относительно собственного шрифта элемента Padding, растущий с локальным текстом
% Относительно размера родителя Гибкая ширина внутри контейнера
vw Относительно ширины viewport Секции на всю ширину (осторожно)
vh Относительно высоты viewport Высота hero, полноэкранные панели

Пиксели (px)

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

Пиксельные размеры для рамки карточки

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 8px;
width: 320px;
}

Когда px всё ещё хорош

Предпочитайте px для волосных рамок, смещений тени и мелкого UI-хрома с фиксированным краем. Предпочитайте относительные единицы, когда макет должен «дышать» с размером шрифта или шириной контейнера.

rem и em

rem относителен к размеру шрифта корневого элемента (обычно <html>). em относителен к размеру шрифта текущего элемента (или родителя — в зависимости от свойства). Для новичков rem — более безопасный выбор по умолчанию для font-size и многих отступов, потому что остаётся согласованным во вложенных элементах.

Типографика от корня с rem

css
CSS Code 
html {
font-size: 100%; /* often 16px in browsers */
}

.lead {
font-size: 1.25rem; /* ~20px if root is 16px */
margin-bottom: 0.75rem;
}

em одним предложением

Используйте em, когда хотите, чтобы значение масштабировалось с локальным шрифтом — например padding, который растёт, если текст компонента увеличивается. Если вложенные em умножаются и «убегают», переведите эти размеры на rem.

Проценты (%)

Процент относителен к измерению родителя. При width: 50% элемент стремится к половине ширины родителя (когда у родителя задана ширина). Проценты — классический инструмент гибких раскладок внутри контейнера.

Гибкая ширина в процентах

css
CSS Code 
.sidebar {
width: 30%;
}

.main {
width: 70%;
}

Единицы viewport (vw и vh)

1vw — это 1% ширины viewport; 1vh — 1% высоты viewport. Мощны для полноэкранных hero, но легко злоупотребить — текст только в vw может стать нечитаемым на очень широких или узких экранах.

Высота viewport для hero

css
CSS Code 
.hero {
min-height: 80vh;
padding: 2rem;
}

Практичная привычка по умолчанию

Стартовая привычка: rem для размеров шрифта и большей части вертикальных отступов, % или гибкие инструменты раскладки (позже: Flexbox/Grid) для ширин, и px для рамок и мелких фиксированных деталей. Возвращайтесь к единицам viewport при секциях на всю ширину — не для каждого margin.

Попробуйте сами

  1. Создайте правило .card с width: 80%, max-width: 24rem и border: 1px solid #94a3b8.
  2. Задайте .card h2 { font-size: 1.5rem; } и короткий абзац в 1rem.
  3. Добавьте секцию .banner { min-height: 40vh; } над карточкой.
  4. Измените размер окна и корневой html { font-size: … }, чтобы почувствовать, как по-разному реагируют %, vh и rem.
  5. По желанию: переведите заголовок в 1.5em внутри .card и посмотрите, удивит ли вложенность.

Частые ошибки

  • Писать font-size: 16 без единицы — недопустимо для длины в стандартном CSS
  • Использовать только px для всех шрифтов на сайте, который должен уважать масштаб/предпочтения
  • Вкладывать много em, пока текст не станет огромным или крошечным
  • Задавать текст body только через vw, чтобы строки «взрывались» на больших мониторах
  • Считать, что высота % работает, когда у родителя нет явной высоты

Кратко

  • Значениям длины обычно нужна единица (px, rem, %, vw, …)
  • Абсолютные фиксированы; относительные масштабируются от шрифта, родителя или viewport
  • Предпочитайте rem для текста, %/системы раскладки для ширин, px для тонких рамок
  • em масштабируется с локальным шрифтом; vw/vh — с viewport
  • Подбирайте единицу под задачу — не навязывайте одну везде

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок