Поиск

Нормальный поток

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

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

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

В контексте форматирования блоков каждый левый сегмент внешнего края блока соприкасается с левым сегментом краевой линии контейнера (при форматировании справа налево соприкасаются правые края). Это справедливо и при наличии перемещаемых объектов (хотя при этом область содержимого блока может сократиться).

Контекст форматирования строк

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

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

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

Обычно левый край линейного блока соприкасается с левым краем контейнера, а правый край - с правым краем контейнера. Однако иногда между их соответствующими краями могут располагаться перемещаемые блоки. Поэтому, хотя в одном контексте строкового форматирования линейные блоки обычно имеют одинаковую ширину (равную ширине контейнера), она все же может изменяться в зависимости от размеров доступного горизонтального пространства, оставляемого перемещаемым объектом. Линейные блоки в одном и том же контексте строкового форматирования зачастую различаются по высоте (например, одна строка может содержать вытянутый графический объект, в то время как другая - только текст).

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

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

Разбиение строковых блоков может осуществляться также и внутри одного линейного блока за счет использования двунаправленной обработки текста.

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

<P>В этом <EM>предложении,</EM> дорогая,
<STRONG>несколько выделенных</STRONG> слов.</P>

Элемент P порождает структурный блок, содержащий пять строковых блоков, три из которых являются безымянными:

Безымянный: "В этом"
EM: "предложении,"
Безымянный: "дорогая,"
STRONG: "несколько выделенных"
Безымянный: "слов."

Чтобы отформатировать этот абзац, агент пользователя помещает все пять блоков в линейные блоки. В этом примере блок, сгенерированный для элемента P, назначает контейнер для линейных блоков. Если контейнер имеет достаточную ширину, то все строковые блоки поместятся в один линейный блок:
В этом предложении, дорогая, несколько выделенных слов.

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

В этом предложении, дорогая,
несколько выделенных слов.
или по-другому:
В этом предложении,
дорогая, несколько
выделенных слов.

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

Рассмотрим следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Пример разбиения на несколько линейных блоков</TITLE>
<STYLE type="text/css">
EM {
padding: 2px;
margin: 1em;
border-width: medium;
border-style: dashed;
line-height: 2.4em;
}
</STYLE>
</HEAD>
<BODY>
<P>Здесь <EM>несколько выделенных</EM> слов.</P>
</BODY>
</HTML>

В зависимости от ширины элемента P блоки могут распределяться следующим образом:


Поля располагаются до слова "несколько" и после слова "выделенных".
Отступы располагаются до, сверху и снизу слова "несколько" и после, сверху и снизу слова "выделенных". В обоих случаях с трех сторон слова окружены штрих-пунктирной границей.
Относительное позиционирование

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

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

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

Динамическое перемещение относительно позиционируемых блоков способно порождать эффекты анимации в текстовом окружении (см. также свойство 'visibility'). Относительное позиционирование можно использовать как основное средство для создания верхних и нижних индексов, если только высота строки не регулируется автоматически, препятствуя осуществлению позиционирования. Дополнительную информацию можно найти в разделе о вычислении высоты строк.

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