Кодик
Начать бесплатно

Часто задаваемые вопросы по HTML и CSS на собеседованиях на вакансии фронтенд-разработчика

Готовишься к интервью на фронтенд-позицию? Уже представляешь, как будешь рассказывать про крутые React-хуки и TypeScript-дженерики, но интервьюер вдруг спрашивает: "А чем отличается inline от inline-block?" И ты такой: surprised_pikachu.jpg. Погнали разбирать те самые вопросы, которые заставляют даже сеньоров нервно гуглить перед собесом.

РазработкаWeb

6 мин

Привет, будущая жертва технического собеседования! 👋

Готовишься к интервью на фронтенд-позицию? Уже представляешь, как будешь рассказывать про крутые React-хуки и TypeScript-дженерики, но интервьюер вдруг спрашивает: "А чем отличается inline от inline-block?" И ты такой: surprised_pikachu.jpg

Да-да, даже в 2026 году на собесах любят погонять по основам. И знаешь что? Это правильно. Потому что человек, который не понимает box model, но пытается объяснить виртуальный DOM — это как водитель, который не знает, где педаль тормоза, но рассуждает о квантовых двигателях.

Погнали разбирать те самые вопросы, которые заставляют даже сеньоров нервно гуглить перед собесом.

1. Блочная модель (Box Model) — классика жанра

Вопрос: Из чего состоит блочная модель?

Ответ для интервьюера:
Каждый элемент — это слоеный пирог из:

  • Content — сам контент

  • Padding — отступ внутри элемента

  • Border — рамка

  • Margin — внешний отступ

Что говорить дальше (чтобы выглядеть умно):
"По умолчанию width и height применяются только к content. Но если использовать box-sizing: border-box, то размеры будут включать padding и border. Это спасает от неожиданных переполнений и уже давно стандарт в CSS-reset."

Почему спрашивают:
99% багов с версткой — это когда ты забыл про margin или padding. Или когда box-sizing не тот.

2. Позиционирование: Static, Relative, Absolute, Fixed, Sticky

Вопрос: В чем разница между типами позиционирования?

Краткий ответ:

  • Static — обычное поведение (как будто position вообще не указан)

  • Relative — смещение относительно своего нормального положения

  • Absolute — позиционирование относительно ближайшего позиционированного родителя

  • Fixed — относительно viewport (прилипает при скролле)

  • Sticky — гибрид relative и fixed (прилипает при достижении точки)

Подводный камень:
Absolute-элемент ищет родителя с position: relative/absolute/fixed. Если не находит — позиционируется относительно <body>. Это та самая причина, почему модалка иногда улетает в космос.

3. Flexbox — любимец всех верстальщиков

Вопрос: Как центрировать div по вертикали и горизонтали?

Ответ в 2026 году:

.container {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center; /* по вертикали */
}

Дополнительные очки:
"Есть еще Grid с place-items: center, но флекс — проще для одноосевых раскладок."
Если кто-то на собесе говорит про margin: 0 auto и таблицы — он либо застрял в 2010-м, либо проверяет, застрял ли ты. 😄

4. Grid vs Flexbox — вечный спор

Вопрос: Когда использовать Grid, а когда Flexbox?

Правильный ответ:

  • Flexbox — для одномерных раскладок (строка ИЛИ колонка)

  • Grid — для двумерных раскладок (строки И колонки одновременно)

Пример:

  • Навигация, карточки в ряд → Flexbox

  • Целый layout страницы, сложная сетка → Grid

5. Специфичность селекторов (Specificity)

Вопрос: Какой стиль применится?

#header .nav li { color: red; }
.nav li { color: blue; }
li { color: green; }

Ответ:
Красный, потому что специфичность считается как (ID, Class, Tag):

  • Первый: (1, 1, 1) = 111

  • Второй: (0, 1, 1) = 11

  • Третий: (0, 0, 1) = 1

Лайфхак:
!important перебивает всё, но использовать его — как писать код на CAPS LOCK. Технически работает, но все будут косо смотреть.

6. Семантический HTML — не просто модное слово

Вопрос: Зачем нужны семантические теги?

<header>, <nav>, <article>, <section>, <footer> — это не просто стильные <div>-ы.

Преимущества:

  1. SEO — поисковики понимают структуру

  2. Accessibility — скринридеры знают, что где

  3. Читаемость кода — быстрее понять, что происходит

Анти-паттерн:

<div class="header">
  <div class="nav">...</div>
</div>

Это как называть переменную var1, var2 — работает, но зачем?

7. Псевдоклассы vs Псевдоэлементы

Вопрос: В чем разница?

Псевдоклассы (одно двоеточие):

a:hover { }
li:first-child { }
input:focus { }

Выбирают элементы в определенном состоянии.

Псевдоэлементы (два двоеточия):

p::before { content: "👉 "; }
p::after { content: " 👈"; }

Создают виртуальные элементы.

8. Z-index и контекст наложения

Вопрос: Почему мой элемент с z-index: 9999 всё равно под другим элементом?

Ответ:
z-index работает только внутри своего stacking context (контекста наложения).

Создают новый контекст:

  • position: absolute/relative/fixed + z-index

  • opacity < 1

  • transform

  • filter

  • И еще штук 10 свойств
    Если видишь в коде z-index: 99999, знай — тут кто-то отчаянно боролся с багом и проиграл.

9. Единицы измерения: px, em, rem, vh, vw

Вопрос: Какая разница?

Шпаргалка:

  • px — абсолютные пиксели

  • em — относительно размера шрифта родителя (каскадируется!)

  • rem — относительно размера шрифта <html> (не каскадируется)

  • vh/vw — процент от высоты/ширины viewport

  • % — относительно родителя
    rem — лучший выбор для современной адаптивной верстки. Меняешь font-size на html — масштабируется всё.

10. Display: none vs Visibility: hidden vs Opacity: 0

Вопрос: Чем отличаются?

Ответ:

Свойство

Занимает место

Доступен для событий

Анимируется

display: none

❌

❌

❌

visibility: hidden

✅

❌

❌

opacity: 0

✅

✅

✅

Когда что использовать:

  • Полностью убрать — display: none

  • Скрыть, сохранив место — visibility: hidden

  • Плавное появление/исчезновение — opacity

11. Адаптивность: Media Queries

Вопрос: Как сделать сайт адаптивным?

Базовый синтаксис:

/* Mobile first подход */
.container { width: 100%; }

@media (min-width: 768px) {
  .container { width: 750px; }
}

@media (min-width: 1200px) {
  .container { width: 1170px; }
}

Современный тренд:
Использовать clamp() для плавного масштабирования:

font-size: clamp(1rem, 2vw, 2rem);

12. CSS-переменные (Custom Properties)

Вопрос: Как работают CSS-переменные?

Пример:

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

Преимущества перед Sass-переменными:

  • Можно менять через JavaScript

  • Поддерживают наследование

  • Работают нативно в браузере

13. Вертикальный margin collapse

Вопрос: Почему между двумя блоками margin не суммируется?

Ответ:
Вертикальные margin'ы схлопываются (берется больший). Это называется margin collapse.

Пример:

.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }
/* Расстояние между ними = 30px, а не 50px */

Как отключить:

  • Flexbox/Grid контейнер

  • overflow: hidden на родителе

  • padding или border на родителе

14. Inline vs Inline-block vs Block

Вопрос: В чем разница?

Таблица истины:

Тип

Ширина/высота

На новой строке

Можно margin/padding

inline

❌

❌

Только horizontal

inline-block

✅

❌

✅ Всё

block

✅

✅

✅ Всё

Жизненный пример:
<span> — inline, <div> — block, а <button> по умолчанию — inline-block.

15. Псевдокласс :nth-child() и его друзья

Вопрос: Как выбрать каждый третий элемент?

Ответ:

li:nth-child(3n) { /* Каждый третий */ }
li:nth-child(odd) { /* Нечетные */ }
li:nth-child(even) { /* Четные */ }
li:nth-child(3n+1) { /* 1, 4, 7, 10... */ }

Подводный камень:
:nth-child() считает всех соседей, даже разных типов. Если нужны только определенные — используй :nth-of-type().

🚀 А теперь про обучение (без занудства)

Окей, ты прочитал все эти вопросы, может, даже что-то законспектировал. Но давай честно — через неделю половина вылетит из головы. Так работает наш мозг.

Проблема: теория без практики — это как смотреть видео "Как научиться плавать". Понятно, но попробуй не утонуть.

Решение: Практика, практика, практика. И не просто "открыл редактор и написал три строки", а системно.

Вот где можно прокачаться реально:

Кодик — мобильное приложение для изучения программирования, где:

  • Теория дозируется по чуть-чуть (без перегруза)

  • Сразу же практика в интерактивных заданиях

  • Учишься прямо в телефоне (в метро, в очереди, где угодно)

  • Курсы по Python, JavaScript, HTML/CSS и другим технологиям

Фишка в том, что ты не просто читаешь "как работает flexbox", а тут же верстаешь настоящие элементы. Мышечная память формируется, и на собесе руки сами вспомнят синтаксис.

Бонус - Telegram-канал Кодик — сообщество, где мы делимся полезными постами и лайфхаками, обсуждаем свежие фичи языков и фреймворков, помогаем разобраться, если что-то не понятно.

Заключение: как не облажаться на собесе?

Три золотых правила:

  1. Не паникуй, если не знаешь ответ. Лучше честно сказать "Не уверен, но предположу..." и порассуждать логически, чем нести околесицу.

  2. Практика важнее зубрежки. Верстни pet-проекты, копируй любимые сайты, ломай и чини. Руками делать — лучше всего запоминается.

  3. Понимание > Запоминание. Знать, что display: flex делает элементы флексами — мало. Понимать, почему и когда это использовать — вот что нужно.

Удачи на собесах! Да пребудет с тобой флекс. 🚀

Комментарии