Урок 16. Теория: display и поток документа

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная
#display #visibility

⚡ Кратко

Свойство display определяет, как элемент участвует в потоке страницы: занимает строку целиком, течёт внутри строки, ведёт себя как гибрид или исчезает из раскладки.

  • block — каждый с новой строки, занимает всю доступную ширину (div, p, section, h1).
  • inline — стоит в строке как слово; width/height игнорируются (span, a, strong).
  • inline-block — стоит в строке, но принимает размеры и вертикальные отступы.
  • flex — превращает контейнер в гибкую строку/колонку, управляющую детьми.
  • none убирает элемент полностью; visibility: hidden прячет, но место сохраняет.

Главная идея

Поток документа (normal flow) — это обычный порядок, в котором браузер раскладывает элементы без специального позиционирования: блочные идут сверху вниз, строчные — слева направо внутри строки. Свойство display — главный рычаг, которым мы меняем участие элемента в этом потоке.

Представь текст в тетради. Block — это абзац: он всегда начинается с новой строки и тянется во всю ширину листа. Inline — это слово внутри предложения: оно стоит рядом с соседями и переносится вместе со строкой, ему нельзя «насильно» задать ширину в сантиметрах. Inline-block — это вклеенная в строку марка: она стоит среди слов, но у неё есть собственный прямоугольный размер. А flex — это полка, которая сама раздвигает и выравнивает поставленные на неё предметы.

Нормальный поток: как браузер раскладывает элементы

Без единой строчки CSS браузер уже знает, куда поставить элемент, по его типу display по умолчанию. Блочные складываются столбиком, строчные — текут в ряд:

block — сверху вниз block — на всю ширину inline inline inline inline — слева направо в строке
Нормальный поток: блочные элементы — столбиком, строчные — в ряд.

Четыре режима display своими глазами

Контейнеры ниже одинаковые, отличается только значение display у детей (или у самого контейнера для flex). Сравни поведение:

block — каждый ребёнок с новой строки, во всю ширину:

1
2
3

inline — в строку, размеры игнорируются (высота — по строке текста):

один два три

inline-block — в строку, но с собственными размерами и отступами:

1
2
3

flex — контейнер сам распределяет детей по строке:

1
2
3

Когда что применять

  • block — секции, абзацы, карточки: всё, что должно занимать свою строку.
  • inline — выделения внутри текста (span, strong, ссылка в предложении).
  • inline-block — бейджи, теги, кнопки-ссылки: маленькие элементы в ряд, которым нужны размеры и padding.
  • flex — когда нужно выровнять или распределить группу элементов (об этом подробно в следующих уроках).

Скрытие: none против visibility

display: none полностью убирает элемент из раскладки и из дерева доступности — его как будто нет. visibility: hidden делает элемент невидимым, но место под него сохраняется, и соседи не сдвигаются.

⚠️ Проверить по документации (MDN): display: none исключает элемент из дерева доступности (скринридеры его не читают), тогда как visibility: hidden тоже скрывает от скринридеров, но сохраняет занимаемое место. Не прячьте важный текст через display: none, если он нужен для доступности.

Заглядывая вперёд: flex и направление

Когда контейнеру задают display: flex, его прямые дети выстраиваются вдоль главной оси. По умолчанию ось горизонтальная (flex-direction: row — слева направо), но её можно развернуть в колонку (flex-direction: column).

⚠️ Проверить по документации (MDN: Flexbox): полноценное изучение flex — в следующих уроках. Здесь важно лишь увидеть, что flex — ещё одно значение display, меняющее раскладку детей.
Проверка себя: открой любой сайт в DevTools (F12), найди элемент-бейдж или кнопку и посмотри его computed display. Объясни, какое значение и почему элемент стоит в строке или с новой строки.