Как было написано ранее, под блокообразующие HTML-элементы при выводе документа отводятся стилевые блоки, обладающие определенными визуальными свойствами (отступы, границы, поля). Под строковые HTML-элементы такие блоки не выделяются. Все строковые элементы входят в состав блокообразующих элементов и отображаются в их информативной области. Блокообразующим элементом самого высокого уровня является элемент body.

С точки зрения структуры использование блоков выглядит не совсем так. В CSS2 каждый HTML-элемент, присутствующий в дереве документа (элемент <br>, например, не присутствует), помещается в структурный блок. Структурные блоки блокообразующих HTML-элементов называются главными. Таким образом, только главные структурные блоки могут иметь свое, индивидуальное стилевое оформление (отступы, границы, поля). Именно они и их параметры, используются при форматировании (компоновке) документа. Главный блок может содержать либо структурную единицу текста (например, абзац), либо несколько структурных блоков, являющихся его потомками (например, несколько абзацев). Вообще, все структурные блоки, имеющие внутри себя хотя бы один дочерний структурный блок, ничего, кроме структурных блоков, содержать не могут. Рассмотрим это положение на примере:

<p>
Текст абзаца
Текст абзаца
<pre>
Отформатированный текст абзаца
Отформатированный текст абзаца
Отформатированный текст абзаца
</pre>
<p>

В этом примере главный структурный блок содержит в себе некий текст абзаца, а также дочерний структурный блок (тоже главный), порожденный элементом pre.

В сооветствии с вышеприведенным положением CSS2 этого быть не должно. Выход из создавшегося положения заключается в том, что под текст абзаца выделяется безымянный структурный блок. И, таким образом, главный структурный блок, порожденный элементом <p>, становится обладателем двух дочерних структурных блоков и ничего более, чем и достигается соблюдение требований языка CSS2.

Строковые элементы, не образующие новых структурных единиц текста, заключаются в строковые структурные блоки. Например:

<p>
Пример армейского юмора:
<strong> Приказ командира </strong>

<em> Всем отсутствующим построиться в отдельную шеренгу </em>
</p>

Элемент <p> порождает главный структурный блок, который содержит несколько строковых структурных блоков:

  • безымянный строковый блок ("Пример армейского юмора");
  • строковый структурный блок, порожденный элементом strong ("Приказ командира");
  • строковый структурный блок, порожденный элементом em ("Всем отсутствующим построиться в отдельную шеренгу").

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

В CSS2 положение и размеры блоков определяются относительно краев определенной области прямоугольной формы. Эта область называется контейнером. Контейнером для любого структурного блока является пространство, отведенное для информативной области его родительского структурного блока. При этом говорят, что родительский блок назначает контейнер своему потомку.

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

Ввиду всего вышесказанного становится понятным, что начальный контейнер назначается корневым HTML-элементом дерева документа, т.е. либо элементом body, либо элементом frameset. Именно начальный контейнер является контейнером самого высокого уровня. Его нельзя позиционировать (задавать его положение в контексте других блоков) и перемещать. Это значит, что применительно к нему игнорируются соответствующие CSS2-свойства position и float, описываемые далее. Можно задавать только геометрические размеры начального контейнера, указав атрибуты width и height корневого HTML-элемента. Дочерние блоки всех поколений не могут выходить за рамки начального контейнера.

Теперь рассмотрим, где, как и в какой последовательности могут отображаться структурные блоки в рамках визуального представления документа. Если язык HTML позволял осуществлять только последовательный вывод (содержимое элементов располагается на странице друг за другом в том порядке, в котором заданы сами HTML-элементы), то язык CSS2 позволяет реализовать более широкие возможности позиционирования.