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

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

⚡ Кратко

Соберите страницу с рядом тегов-бейджей (inline-block) и демонстрацией display: none vs visibility: hidden. Результат — видимый, поведение — проверено в DevTools.

Что сделать

Соберите блок с абзацем текста и набором тегов под ним.
Оформите теги через display: inline-block (фон, padding, скругление, отступы).
Добавьте два одинаковых списка и продемонстрируйте разницу display: none и visibility: hidden.
В комментариях CSS опишите, какой элемент участвует в потоке и как (block/inline/inline-block).

Ожидаемый результат

Мои навыки:

HTML CSS Flexbox

<p>Мои навыки:</p>
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>

Подготовка окружения

Создайте папку проекта, например lesson16-display/.
Внутри — файлы index.html и style.css.
Подключите стили: <link rel="stylesheet" href="style.css"> в <head>.

Пошаговое решение

В index.html создайте абзац и контейнер с тегами-span.
В style.css опишите класс .tag с display: inline-block, фоном, padding и border-radius.
Добавьте два списка <ul>; в одном спрячьте пункт через display: none, в другом — через visibility: hidden.
Прокомментируйте в CSS, как каждый элемент участвует в потоке.

Проверка в VS Code

Откройте папку в VS Code, запустите index.html (расширение Live Server или просто двойной клик по файлу).
Откройте DevTools (F12), выберите тег и проверьте computed display: inline-block.
Сравните, как ведут себя списки: при display: none места нет, при visibility: hidden место осталось.

Критерии сдачи

Страница открывается локально и совпадает с ожидаемым результатом.
CSS вынесен в отдельный файл style.css.
Поведение display проверено через DevTools.
В комментариях объяснён режим потока каждого элемента.

Связь с теорией: раздел Теория (режимы display) и Примеры (живые демо).