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

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

⚡ Кратко

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

О чём этот урок

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

Поток документа — обычный порядок размещения элементов сверху вниз и слева направо без специального позиционирования.

Четыре режима — наглядно:

block
inline
inline-block
flex

Структура урока

Теория

Разбор темы и базовых правил.

Справочник

Справочник свойств и конструкций.

Примеры

Рабочие примеры с CSS-кодом.

Старый vs Новый

Сравнение слабого и поддерживаемого подхода.

Задания

Практика для самостоятельной работы.

Решения

Проверочные ответы и критерии.

Ошибки

Типичные ошибки и диагностика.

Домашнее задание

Домашняя работа для закрепления.

Ресурсы

Документация и справочные ссылки.

Практика

  • Сравните div, span и a без CSS.
  • Задайте ссылкам display: inline-block и добавьте padding.
  • Проверьте разницу display: none и visibility: hidden.

Навигация