Когда мы читаем книгу, то взгляд скользит по словам слева направо и по строкам сверху вниз. Для нас это привычный способ чтения, который используется везде, где есть текст. Схожим образом работает и HTML, размещая элементы на веб-странице в привычном нам порядке — слева направо и сверху вниз. Порядок отображения элементов на веб-странице называется потоком.
Сам поток задаётся структурой HTML-кода и элементы на веб-странице обычно отображаются в том же порядке, как они идут в HTML. В примере 1 у нас используется три элемента внутри <body>:
- первым идёт изображение <img>;
- вторым идёт заголовок <h2>;
- третьим идёт абзац <p>.
Пример 1. Порядок элементов
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
</head>
<body>
<img src="image/icon-fox.svg" alt="Лиса" width="200">
<h2>Рыжая лиса</h2>
<p>Хитрый и ловкий хищник, известный своей рыжей шерстью и пушистым хвостом.</p>
</body>
</html>
В браузере мы увидим эти элементы в том же порядке, как они написаны в коде HTML. Первым отображается изображение, последним текстовый абзац (рис. 1).
Рис. 1. Отображение элементов в браузере
Поток может и не совпадать с привычным нам направлением, поскольку зависит, в том числе, и от используемого языка. К примеру, в арабском языке чтение происходит справа налево и элементы веб-страницы будут размещаться также справа налево. Подробнее о направлении письма и его влиянии на раскладку мы поговорим в следующем уроке.
Как будут отображаться элементы — слева направо или сверху вниз — зависит от типа элемента:
- блочные элементы занимают всю доступную ширину и идут сверху вниз;
- строчные элементы по ширине соответствуют своему содержимому и идут слева направо.
Блочные элементы располагаются вдоль блочной оси, которая направлена сверху вниз. На рис. 2 блочные элементы схематично выделены красной рамкой.
Рис. 2. Блочная ось
В примере 2 используются блочные элементы <div>, которые выделены рамкой и отделены друг от друга небольшим промежутком.
Пример 2. Блочные элементы
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
div {
border: 1px solid #ed1c24; /* Параметры рамки */
padding: 1rem; /* Расстояние от текста до рамки */
margin-bottom: 1rem; /* Промежуток снизу */
}
</style>
</head>
<body>
<div>Существует более 30 видов лис, и они принадлежат к разным родам.</div>
<div>Лисы могут жить в лесах, пустынях и даже в городских районах.</div>
<div>Лисы имеют уникальные голосовые сигналы, которые они используют для общения друг с другом.</div>
<div>Лисы обладают отличным слухом и могут услышать звуки, издаваемые грызунами, находящимися под снегом.</div>
</body>
</html>
Результат данного примера показан на рис. 3.
Рис. 3. Порядок блочных элементов
Строчные элементы располагаются вдоль строчной оси, которая направлена слева направо. Если такие элементы не помещаются в одну строку, то они переносятся на другую строку (рис. 4).
Рис. 4. Строчная ось
В примере 3 используются строчные элементы <span>, которые выделены синей рамкой.
Пример 3. Строчные элементы
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
span {
border: 1px solid #008eb0; /* Параметры рамки */
padding: 0 5px; /* Расстояние от текста до рамки */
white-space: nowrap; /* Запрет переноса */
}
</style>
</head>
<body>
<span>Афганская лисица</span>
<span>Корсак</span>
<span>Песец</span>
<span>Песчаная лисица</span>
<span>Рыжая лисица</span>
<span>Тибетская лисица</span>
<span>Фенек</span>
</body>
</html>
Результат данного примера показан на рис. 5.
Рис. 5. Порядок строчных элементов
Опять же, ориентация осей связана с направлением письма, и блочная ось, которая для европейских языков направлена сверху вниз, может оказаться горизонтальной и идти уже слева направо или даже справа налево. Это же касается и строчной оси.
Итоги
- Поток — это порядок вывода элементов на веб-странице.
- Элементы на веб-странице обычно отображаются в том же порядке, как они идут в коде HTML.
- На веб-странице есть две невидимые оси: блочная и строчная. Блочная ось обычно направлена сверху вниз и вдоль неё располагаются блочные элементы. Строчная ось обычно направлена слева направо и вдоль неё располагаются строчные элементы.
- На поток влияет направление письма.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 05.06.2025