Нормальний потік - html, css, javascript, perl, php, mysql

Блоки, що містяться в нормальному потоці, належать контексту форматування, який може бути або блоковим, або строкових, але не тим і ні іншим одночасно. Структурні блоки беруть участь в контексті форматування блоків. Блоки строкового рівня беруть участь в контексті форматування рядків.

Контекст форматування блоків

В контексті форматування блоків блоки розташовуються один за одним вертикально, починаючи з верхнього краю контейнера. Вертикальна відстань між двома сестринськими блоками визначається за допомогою властивості 'margin'. В контексті форматування блоків вертикальні поля між сусідніми структурними блоками перекриваються.

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

Контекст форматування рядків

В контексті форматування рядків блоки розташовуються горизонтально, один за іншим, починаючи з верхнього краю контейнера. Горизонтальні поля, межі та відступи всередині цих блоків зберігаються. Існують різні способи вертикального вирівнювання блоків: по нижньому або по верхньому краю або за рівнем міститься в них тексту. Прямокутна область, яка містить блоки, що формують один рядок, називається лінійним блоком.

Ширина лінійного блоку визначається шириною контейнера. Висота лінійного блоку регулюється правилами, описаними в розділі "Обчислення висоти рядків". Лінійний блок завжди має висоту достатню, щоб вмістити все блоки. Однак він може бути вище, ніж найвищий блок, що міститься всередині, (якщо, наприклад, блоки вирівняні таким чином, що підошви тексту знаходяться на одній осі). Якщо висота блоку B менше, ніж висота лінійного блоку, в якому він знаходиться, то вертикальне вирівнювання блоку B всередині останнього визначається властивістю 'vertical- align'.

Якщо кілька строкових блоків не можуть розміститися горизонтально в межах одного лінійного блоку, то вони розподіляються за двома або більше вертикально розташованими лінійним блоками. Таким чином, абзац являє собою набір вертикально розташованих лінійних блоків. Лінійні блоки не знаходять один на одного і не впораються ніякими вертикальними проміжками.

Зазвичай лівий край лінійного блоку стикається з лівим краєм контейнера, а правий край - з правим краєм контейнера. Однак іноді між їх відповідними краями можуть розташовуватися переміщувані блоки. Тому, хоча в одному контексті строкового форматування лінійні блоки зазвичай мають однакову ширину (рівну ширині контейнера), вона все ж може змінюватися в залежності від розмірів доступного горизонтального простору, що залишається переміщуються об'єктом. Лінійні блоки в одному і тому ж контексті строкового форматування часто різняться по висоті (наприклад, один рядок може містити витягнутий графічний об'єкт, в той час як інша - тільки текст).

Коли сумарна ширина строкових блоків, упорядкованих в рядок, менше ширини містить їх лінійного блоку, то горизонтальний розподіл цих блоків визначається за допомогою властивості 'text-align'. Якщо йому присвоєно значення 'justify', то агент користувача може збільшити довжину строкових блоків.

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

Розбиття строкових блоків може здійснюватися також і всередині одного лінійного блоку за рахунок використання двобічної обробки тексту.

Тут представлений приклад побудови строкового блоку. Наступний абзац (створений елементом P рівня блоку, що належить мові HTML) включає безіменний текст, в який вставлені елементи EM і STRONG:

В цьому пропозиції, дорога,
кілька виділених слів.

Елемент P породжує структурний блок, що містить п'ять строкових блоків, три з яких є безіменними:

Безіменний: "У цьому"
EM: "пропозиції,"
Безіменний: "дорога,"
STRONG: "кілька виділених"
Безіменний: "слів."

Щоб відформатувати цей абзац, агент користувача поміщає всі п'ять блоків в лінійні блоки. У цьому прикладі блок, згенерований для елемента P, призначає контейнер для лінійних блоків. Якщо контейнер має достатню ширину, то всі строкові блоки помістяться в один лінійний блок:
У цій пропозиції, дорога, кілька виділених слів.

В іншому випадку рядкові блоки будуть розбиті на частини, які потім будуть розподілені за кількома лінійним блокам. Попередній абзац може бути розбитий наступним чином:

У цій пропозиції, дорога,
кілька виділених слів.
або по-іншому:
У цій пропозиції,
дорога, кілька
виділених слів.

В останньому випадку блок, породжений елементом EM, був розбитий на дві частини (назвемо їх "split1" і "split2"). Поля, кордони, відступи або елементи текстового оформлення не відображаються після split1 або перед split2.

Розглянемо наступний приклад:

тут кілька виділених слів.

Залежно від ширини елемента P блоки можуть розподілятися наступним чином:

Поля розташовуються до слова "кілька" і після слова "виділених".
Відступи розташовуються до, зверху і знизу слова "кілька" і після, зверху і знизу слова "виділених". В обох випадках з трьох сторін слова оточені штрих-пунктирною кордоном.

відносне позиціонування

Після того як блок був розміщений відповідно до моделі нормального потоку, він може бути зміщений щодо вихідного положення. Дана процедура називається відносним позиціонуванням. Подібне зміщення блоку (B1) не впливає на наступний за ним блок (B2): блоку B2 призначається положення так, як якщо б зміщення блоку B1 не проводилося, і це положення не змінюється, навіть якщо блок B1 після цього буде переміщений. Звідси випливає, що при відносному позиціонуванні може відбуватися накладення блоків.

Щодо позиціонуються блоки зберігають типові розміри переміщуваних об'єктів, включаючи розриви рядків і відведений для них простір. Щодо позиціонується блок призначає новий контейнер для дочірніх елементів нормального потоку і розміщуються нащадків.

Елемент породжує щодо позиціонується блок, якщо для його властивості 'position' встановлено значення 'relative'. Зсув визначається за допомогою властивостей 'top', 'bottom', 'left' і 'right'.

Динамічне переміщення щодо позиціонуються блоків здатне породжувати ефекти анімації в текстовому оточенні (див. Також властивість 'visibility'). Відносне позиціонування можна використовувати як основний засіб для створення верхніх та нижніх індексів, якщо тільки висота рядка не регулюється автоматично, перешкоджаючи здійсненню позиціонування. Додаткову інформацію можна знайти в розділі про обчислення висоти рядків.

Приклади відносного позиціонування представлені в розділі, де проводиться порівняння моделей, що описують нормальний потік, що переміщуються об'єкти і абсолютне позиціонування.