Этап 4 из 19 · ≈ 6 ч

Каскад, специфичность и блочная модель

Основа с Junior

Почему применился именно этот стиль и как считается размер элемента.

Когда к элементу подходит несколько правил, побеждает:

  1. !important (лучше не использовать);
  2. затем более высокий слой (@layer);
  3. затем большая специфичность: id (1-0-0) > класс, атрибут, псевдокласс (0-1-0) > тег (0-0-1);
  4. при равенстве — правило, объявленное позже.

Инлайн-стиль сильнее любых селекторов. Часть свойств (цвет, шрифт) наследуется от родителя, часть (отступы, рамки) — нет.

Блочная модель

Размер элемента складывается из content, padding, border; margin — снаружи. При box-sizing: content-box (по умолчанию) width — только содержимое, и рамка с отступами увеличивают элемент. Почти все проекты ставят глобально:

*, *::before, *::after { box-sizing: border-box; }

Что ещё важно

  • Схлопывание вертикальных margin у соседних блоков.
  • Единицы: px, rem (от шрифта корня), em, %, vw/vh, dvh.
  • Переменные: --accent: #7c5cff; color: var(--accent);.

Критерии освоения

Junior ≈ 6 ч

  • Объясняет, почему применился конкретный стиль — специфичность, порядок, наследование
  • Считает размер элемента в content-box и border-box
  • Использует rem, переменные CSS и не прибегает к !important

Практика. Разобрать 10 задач на специфичность (какое правило победит и почему) и привести стили учебного проекта к box-sizing border-box без регрессий.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как работают каскад и специфичность в CSS?Junior

При конфликте правил побеждает: !important → более высокая специфичность → более позднее правило. Специфичность считается тройкой (id, классы/атрибуты/псевдоклассы, теги/псевдоэлементы): #nav .item a = (1, 1, 1). Инлайн-стиль сильнее любых селекторов.

Полный разбор
Что такое блочная модель CSS и чем content-box отличается от border-box?Junior

Каждый элемент — прямоугольник из content, padding, border, margin. При content-box (по умолчанию) width задаёт только содержимое, а padding и border добавляются сверху. При border-box width включает padding и border — размеры предсказуемы, поэтому почти все…

Полный разбор
Какие CSS-свойства наследуются и как работают inherit, initial и unset?Junior

Наследуются в основном свойства текста: color, font-, line-height, text-align, visibility, cursor. Не наследуются свойства блока: margin, padding, border, background, width, display, position. Ключевые слова: inherit — взять значение родителя, initial …

Полный разбор
Какие единицы измерения есть в CSS и когда какие использовать?Junior

px — абсолютные пиксели; rem — от размера шрифта корня (html), em — от шрифта текущего элемента (вложенные em накапливаются); % — от размера родителя; vw/vh — проценты окна; clamp(min, предпочтительное, max) — плавное значение в границах. Шрифты и отступы…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования