Проценты: от родителя

Значение от соответствующего размера родителя.

Уровень: начальный 10 разделов 10 минут

1. Что это и зачем

Значение от соответствующего размера родителя.

Единицы делятся на абсолютные (px) и относительные (rem, em, %, vw, ch). Относительные единицы делают масштаб адаптивным: размеры зависят от корня, родителя или вьюпорта, и меняются при пересборке страницы.

{title} — база масштабируемости: правильный выбор единицы экономит десятки медиаправил.

2. Синтаксис и пример

.child { width: 50%; }

Запись выше — базовый вариант использования. Обратите внимание, как проценты: от родителя вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Функции — это вычисления браузера: calc() складывает разнородные единицы, clamp() задаёт диапазон, min()/max() выбирают наилучшее значение, var() подставляет переменную.

В реальной разметке проценты: от родителя встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — база масштабируемости: правильный выбор единицы экономит десятки медиаправил.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

calc/clamp/min/max поддержаны во всех современных браузерах; старые получают fallback, если ему предшествует базовое значение.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Проценты работают от ширины / выоты родителя.

Проценты по высоте требуют заданной высоты родителя.

7. Практическое задание

Сверстайте полосу 70% ширины родителя.

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

.child { width: 50%; }

8. Как применять в проектах

rem для типографики и отступов, % и fr для раскладки, vw для «резиновых» элементов, clamp для адаптивных текстов.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

шрифты в rem, а не px;
проценты не создают неожиданных зациклений размера;
жёсткие px только для мелочей (бордеры, иконки);
calc() комбинирует единицы там, где нужно;
единицы соответствуют смыслу: ширина — %, высота — min/auto;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам