Позиционирование / Поток документа [1/20]
×

Поток документа [1/20]

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

Элементы можно вкладывать друг в друга. Чем раньше в коде расположен элемент, тем выше он расположен на странице.

Некоторые типы элементов могут вести себя в потоке более сложно. Например, они могут располагаться в несколько колонок, как блочно-строчные элементы. Эти типы проходились в курсе «Блочная модель документа».

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

В этом курсе мы будем изучать свойства, которые изменяют обычное поведение элементов в потоке.

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Поток документа</title> </head> <body> <h1 class="outline">Поток документа</h1> <div class="outline">Блочные элементы — прямоугольники, которые располагаются слева направо и сверху вниз.</div> <div class="outline"> <div class="outline">Можно вкладывать блоки друг в друга и выстраивать колонки.</div> <div class="column outline">Колонка 1</div> <div class="column outline">Колонка 2</div> <div class="column outline">Колонка 3</div> </div> <div class="outline"><span class="outline">Строчные элементы и текст просто переносятся на</span> следующую строку, если не хватает места.</div> </body> </html>
CSS
.outline { margin: 5px; padding: 5px; } .column { display: inline-block; }
HTML Academy

Подсветите элементы, чтобы увидеть, как формируется поток документа. Для этого:

  1. Задайте элементу с классом outline свойства background: rgba(0, 0, 0, 0.1);
  2. и border: 1px dotted #666666;
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.