CSS: display, normal flow, visibility, overflow
Введение: как расставлять людей в зале 🎟️
Если каждого посадить на отдельный ряд, это поведение block.
Если люди сидят рядом, как слова в строке, это inline.
Если нужно и рядом, и с контролем размеров, это inline-block.
Display задаёт формат элемента.
Normal flow объясняет базовый порядок.
Visibility и overflow управляют скрытием и переполнением.
💡 Совет: если верстка «плывёт», сначала проверьте display, flow и overflow.
✅ Вывод:
эта тема снимает большую часть базовых багов в CSS.
Проблема: макет «ломается» без базовых правил
Без понимания темы:
- width не работает там, где его ожидают;
- скрытые блоки оставляют пустоты;
- длинный текст рвёт карточки.
С пониманием темы:
- раскладка предсказуема;
- скрытие управляемо;
- переполнение под контролем.
✅ Вывод:
display, flow, visibility и overflow — базовые рычаги UI.
Чем помогает и как работает
Тема помогает:
- быстро диагностировать поломки раскладки;
- выбирать правильный режим отображения;
- избегать «прыжков» интерфейса;
- стабилизировать карточки с длинным контентом.
Как это работает:
- Шаг 1: браузер применяет CSS и вычисляет display каждого элемента.
- Шаг 2: normal flow размещает block сверху вниз, inline по строкам.
- Шаг 3: visibility скрывает элемент без удаления из потока.
- Шаг 4: display none убирает элемент и его место.
- Шаг 5: overflow решает судьбу лишнего контента.
- Шаг 6: итоговая раскладка становится стабильной.
✅ Вывод:
цепочка «display → flow → visibility → overflow» должна быть в голове всегда.
Ключевые термины (простыми словами)
- Display — как элемент участвует в раскладке.
- Block — новая строка и блочное поведение.
- Inline — элемент в строке, как слово.
- Inline-block — строка + размеры.
- Normal flow — базовый порядок элементов.
- Visibility — визуальное скрытие с возможным сохранением места.
- Overflow — поведение при переполнении.
✅ Вывод:
эти термины регулярно встречаются на собеседованиях.
1. Display block
Назначение: строить вертикальный каркас страницы.
Простыми словами: блок занимает отдельную строку.
Для новичка: секции и карточки почти всегда начинаются с block.
Аналогия: отдельная полка в шкафу.
Пример:
.card { display: block; width: 100%;}🔎 Как это происходит на практике:
- элемент получает новую строку;
- у него работают width/height;
- проще контролировать отступы.
Характеристики:
- ✅ новая строка;
- ✅ поддержка размеров;
- ✅ удобно для структуры.
Когда использовать: секции, карточки, контейнеры.
✅ Вывод:
block — базовый режим каркаса.
2. Display inline
Назначение: встраивать элемент в строку.
Простыми словами: элемент ведёт себя как слово.
Для новичка: ссылки и фрагменты текста обычно inline.
Аналогия: слово в предложении.
Пример:
.link { display: inline;}🔎 Как это происходит на практике:
- элементы стоят рядом;
- width как у блока не применяется;
- для «кнопочного» поведения нужен inline-block.
Характеристики:
- ✅ идёт в строке;
- ✅ хорошо для текста;
- ✅ не для блочной геометрии.
Когда использовать: ссылки, текстовые метки.
✅ Вывод:
inline — про текст, а не про «коробки».
3. Display inline-block
Назначение: оставить элемент в строке и дать ему размеры.
Простыми словами: компактный блок, который стоит рядом с другими.
Для новичка: кнопки и бейджи в ряд — это inline-block.
Аналогия: бейдж на одежде.
Пример:
.badge { display: inline-block; padding: 4px 10px;}🔎 Как это происходит на практике:
- кнопки стоят в одну линию;
- у них работают размеры и padding;
- интерфейс выглядит ровно.
Характеристики:
- ✅ строка + размеры;
- ✅ удобен для чипов и кнопок;
- ✅ хорошо сочетается с normal flow.
Когда использовать: бейджи, фильтры, кнопки.
✅ Вывод:
inline-block — удобный гибрид.
4. Display none и visibility hidden
Назначение: скрывать элементы по сценарию.
Простыми словами: display none убирает элемент полностью, visibility hidden только прячет.
Для новичка: выберите способ скрытия по вопросу «нужно ли сохранить место?».
Аналогия: убрать стул из комнаты или накрыть его тканью.
Пример:
.promo { display: none; }.notice { visibility: hidden; }🔎 Как это происходит на практике:
- временный баннер скрывают через display none;
- служебный текст — через visibility hidden;
- верстка перестаёт «прыгать».
Характеристики:
- ✅ разные эффекты для раскладки;
- ✅ критично для UX;
- ✅ частый вопрос на интервью.
Когда использовать:
- display none — убрать элемент и место;
- visibility hidden — скрыть без сдвига.
✅ Вывод:
путать эти свойства нельзя.
5. Normal flow
Назначение: понимать стандартный порядок размещения.
Простыми словами: браузер сначала раскладывает элементы по базовым правилам.
Для новичка: block сверху вниз, inline по строкам.
Аналогия: очередь у кассы.
Пример:
<h2>Заголовок</h2><p>Первый абзац</p><p>Второй абзац</p>🔎 Как это происходит на практике:
- верстка стартует с normal flow;
- потом точечно добавляют flex/grid;
- отладка начинается с проверки базового потока.
Характеристики:
- ✅ предсказуемый базовый порядок;
- ✅ опора для диагностики;
- ✅ фундамент адаптивной верстки.
Когда использовать: всегда как базовую точку.
✅ Вывод:
сначала flow, потом «сложная магия».
6. Overflow hidden, auto, scroll
Назначение: управлять лишним контентом внутри блока.
Простыми словами: overflow решает, обрезать, прокручивать или всегда показывать скролл.
Для новичка: если текст вылезает из карточки, ищите решение в overflow.
Аналогия: чемодан: закрыть, расширить или оставить открытым.
Пример:
.card__desc { max-height: 84px; overflow: auto;}🔎 Как это происходит на практике:
- длинный текст больше не ломает сетку;
- скролл появляется только при необходимости;
- карточки остаются одинаковыми.
Характеристики:
- ✅ hidden обрезает;
- ✅ auto показывает скролл по необходимости;
- ✅ scroll держит скролл всегда.
Когда использовать: карточки, модальные окна, таблицы.
✅ Вывод:
overflow защищает интерфейс от нестабильных данных.
Must-know факты
- width не работает как у блока у display inline;
- display none удаляет элемент и место;
- visibility hidden сохраняет место;
- overflow hidden может обрезать dropdown;
- normal flow применяется первым.
✅ Вывод:
это минимальный набор, который нужно знать без ошибок.
Сравнение display-режимов
| Значение | Новая строка | width/height | Кейс |
|---|---|---|---|
| block | Да | Да | секции |
| inline | Нет | Нет (как у блока) | текст |
| inline-block | Нет | Да | кнопки/бейджи |
Часто спрашивают на собеседованиях
- Почему width не работает у inline?
- Чем inline-block отличается от block?
- Что выбрать: display none или visibility hidden?
- Что такое normal flow?
- Когда нужен overflow auto?
✅ Вывод:
уверенные ответы на эти вопросы закрывают базу по теме.
Типичные ошибки
Ошибка 1: width у inline
❌ Неправильно: ждать блочного поведения у inline.
✅ Правильно: использовать inline-block или block.
Почему: inline не для блочной геометрии.
Ошибка 2: путаница display none и visibility hidden
❌ Неправильно: скрыть visibility, когда нужно убрать место.
✅ Правильно: display none.
Почему: hidden сохраняет пустоту.
Ошибка 3: игнор normal flow
❌ Неправильно: искать причину сразу в сложных стилях.
✅ Правильно: начать с базового потока.
Почему: большинство багов видно уже тут.
Ошибка 4: overflow hidden на блоке с dropdown
❌ Неправильно: обрезать выпадающее меню.
✅ Правильно: менять структуру контейнера.
Почему: hidden режет всё за границей.
Ошибка 5: отсутствие теста на длинном тексте
❌ Неправильно: проверять только короткие данные.
✅ Правильно: тестировать реальные длинные описания.
Почему: переполнение всплывает в проде.
Best Practices
- проверяйте display и flow до сложных решений;
- используйте inline-block точечно;
- выбирайте тип скрытия по UX-сценарию;
- задавайте overflow заранее для карточек;
- тестируйте интерфейс на реальных данных.
Заключение
Ключевые мысли
🎯 Display задаёт базовое поведение элемента.
🎯 Normal flow — фундамент раскладки и отладки.
🎯 Visibility и overflow управляют состояниями и переполнением.
🎯 Понимание этих свойств делает верстку стабильной.