Потік

Потік веб-сторінки визначає порядок відображення елементів по вертикалі та горизонталі. За замовчуванням елементи відображаються в тому порядку, в якому вони з'являються в HTML-документі, зверху вниз. Горизонтальний потік зазвичай рухається зліва направо; однак у мовах, які читають справа наліво, потік також може бути зворотнім - справа наліво.

Кожен елемент в HTML - це прямокутна область, яка займає певну позицію в рядку, подібно до слів на аркуші в клітинку. Існує два основних типи елементів: блокові (block-level) та рядкові (inline) елементи.

Проаналізувавши приклад, ми можемо сказати:

Блоковий елемент займає весь рядок. Довжина вмісту не має значення. Блокові елементи слідують один за одним зверху вниз.

Рядковий елемент займає простір з урахуванням розміру контенту. Тому деякі рядкові елементи можуть знаходитися в одному рядку. Коли на одному рядку не вистачає місця для розміщення всіх елементів, вони переносяться на новий рядок.

Примітка

Властивість відображення HTML-елементів визначена заздалегідь відповідно до стандартів і домовленостей, встановлених специфікацією HTML. Ці стандарти визначають поведінку відображення елементів у різних веб-браузерах за замовчуванням. Ви можете знайти конкретний тип будь-якого елемента за наведеними посиланнями або специфікаціями: HTML-довідник та HTML Специфікація.

Типи елементів

Як вже згадувалося раніше, кожен елемент в таблиці стилів браузера має тип, представлений властивістю display, яка визначає його поведінку. Двома основними типами елементів є блокові (block-level) та рядкові (inline) елементи, а також існують додаткові типи, такі як блоково-рядкові (inline-block) елементи.

Рядкові елементи (inline) в основному використовуються для стилізації та виділення текстового вмісту, наприклад, посилань, кнопок і зображень. Вони розміщуються в одному рядку доти, доки не залишиться вільного місця. Коли рядок заповнюється, вони переходять на наступний рядок і продовжують заповнювати його.

Блокові елементи (block-level) призначені для визначення текстових контейнерів, таких як заголовки, списки та абзаци, а також більших смислових розділів, таких як колонтитули, верхні та нижні колонтитули та розділи. Візуально вони представлені у вигляді прямокутних областей, розташованих одна над одною по вертикалі.