Поиск

Управление процессом создания блоков

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

Элементы уровня блока и структурные блоки

К элементам уровня блока относятся элементы исходного документа, которые визуально форматируются в виде неких структурных единиц текста (например, абзацев). Принадлежность уровню блока определяется значениями свойства 'display': 'block', 'list-item', 'compact' и 'run-in' (см. разделы, посвященные компактным и инициальным блокам), а также 'table'.

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

Некоторые элементы уровня блока порождают дополнительные блоки за пределами главного: элементы 'list-item' и элементы с маркерами. Дополнительные блоки размещаются относительно главного блока.

Безымянные структурные блоки

В документе
<DIV>
Тект
<P>Еще текст
</DIV>
(считается, что для элементов DIV и P установлено значение 'display: block') элемент DIV имеет два типа содержимого: принадлежащего строке и принадлежащего блоку. Чтобы упростить процесс форматирования, предполагается, что надпись "Текст" заключена в безымянный структурный блок.

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

Другими словами, если структурный блок (подобный сгенерированному для элемента DIV) содержит в себе другой структурный блок (например, сгенерированный для элемента P), то он не должен содержать ничего, кроме структурных блоков. При этом каждый строковый блок вкладывается в безымянный структурный блок.

Такая модель в следующем примере может реализоваться, если использовать правила:

/* Замечание: учет этих правил не является обязательным для */
/* пользовательских агентов, управляющих отображением HTML-долкументов */
BODY { display: inline }
P { display: block }

в приведенном ниже HTML-документе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Безымянный текст, разорванный блоком</TITLE>
</HEAD>
<BODY>
Это безымянный текст, расположенный до элемента P.
<P>Это содержимое элемента P.</>
Это безымянный текст, расположенный после элемента P.
</BODY>

Элемент BODY содержит отрывок (C1) безымянного текста, после которого следует элемент уровня блока, за которым, в свою очередь, следует другой отрывок (C2) безымянного текста. В результате будут сгенерированы безымянный структурный блок для элемента BODY, который содержит безымянный структурный блок, заключающий в себя отрывок C1, структурный блок для элемента P и другой безымянный структурный блок, заключающий в себя отрывок C2.

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

Элементы строкового уровня и строковые блоки

Элементы строкового уровня - это элементы исходного документа, которые не формируют новых структурных единиц текста. Их содержимое выводится в строке (например, выделенные отрывки текста в абзаце или графические объекты, импортированные в текст). Определенные значения свойства 'display' делают элемент принадлежащим строке: 'inline', 'inline-table', 'compact' и 'run-in' (см. разделы, посвященные компактным и инициальным блокам). Элементы строкового уровня порождают строковые блоки.

Строковые блоки могут использоваться в контексте различных методологий форматирования:

  • в рамках структурного блока строковые блоки используются в контексте строкового форматирования;
  • компактный строковый блок располагается в поле структурного блока;
  • блоки, порожденные маркерами, также располагаются за пределами структурного блока.
Безымянные строковые блоки

В документе типа:

<P>Отрывок <EM>выделенного</em> текста</P>

Элемент P порождает структурный блок, который содержит несколько строковых блоков. Блок, содержащий слово "выделенного", является строковым блоком, порожденным строковым элементом EM. Блоки, содержащие слова "Отрывок" и "текста", являются строковыми блоками, порожденными элементом P структурного уровня. Последние называются безымянными строковыми блоками, т.к. не существует элемента строкового уровня, который был бы связан с ними.

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

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

При форматировании таблиц встречаются и другие типы безымянных блоков.

Компактные блоки

Компактный блок ведет себя следующим образом:

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

Расположение компактного блока на полях осуществляется следующим образом: он находится за пределами (слева или справа) первого строкового блока структурного блока, но при этом влияет на вычисление высоты строкового блока. Свойство 'vertical-align' компактного блока определяет его вертикальное положение относительно упомянутого строкового блока. В горизонтальной плоскости компактный блок всегда находится в поле структурного блока.

Элемент, который не может быть размещен на одной строке, не должен заходить на поля следующего блока. Например, элемент 'compact' в HTML, который включает элемент BR, всегда будет форматироваться как структурный блок (учитывая основной стиль элемента BR, который вставляет новую строку). Для размещения на полях текста, состоящего из нескольких строк, более всего подходит свойство 'float'.

В следующем примере представлен компактный блок.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Пример компактного блока</TITLE>
<STYLE type="text/css">
DT { display: compact }
DD { margin-left: 4em }
</STYLE>
</HEAD>
<BODY>
<DL>
<DT>Коротко
<DD><P>Здесь располагается описание
<DT>Слишком большая длина по сравнению с шириной поля
<DD><P>Здесь располагается описание
</DL>
</BODY>
</HTML>

Данный пример можно отформатировать следующим образом:

Коротко

Здесь располагается описание

Слишком большая длина по сравнению с шириной поля

Здесь располагается описание

Свойство 'text-align' может использоваться для выравнивания компактного элемента внутри поля: по левому краю поля ('left'), по правому краю поля ('right') или по центру поля ('center'). Значение 'justify' не используется и интерпретируется как 'left' или 'right', в зависимости от свойства 'direction' элемента уровня блока, в поле которого производилось форматирование компактного элемента ('left' если значение направления равно 'ltr', 'right' если оно равно 'rtl'.)

Инициальные блоки

Инициальный блок ведет себя следующим образом:

  • Если структурный блок (который не перемещается и не является абсолютно позиционируемым) следует за инициальным блоком, то последний становится первым строковым блоком структурного блока.
  • В противном случае инициальный блок становится структурным блоком.

Инициальный блок оказывается удобным при вставке заголовков, как это показано в следующем примере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Пример инициального блока</TITLE>
<STYLE type="text/css">
H3 { display: run-in }
</STYLE>
</HEAD>
<BODY>
<H3>Вставляемый заголовок.</H3>
<P>И абзац текста, который следует
за ним.
</BODY>
</HTML>

Данный пример может быть отформатирован следующим образом:

Вставляемый заголовок. И абзац
текста, который
следует за ним.

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

Свойство 'display'
'display'

Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | наследуемое
Начальное значение: строковое
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Устройства: все

Значения этого свойства:

block

При этом значении свойства элемент порождает главный структурный блок.

inline

При этом значении свойства элемент порождает один или несколько строковых блоков.

list-item

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

marker

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

none

При этом значении свойства элемент не порождает ни одного блока в структуре форматирования (т.е. элемент никак не влияет на отображение документа). Потомки этого элемента тем более не будут порождать никаких блоков, даже если для их свойства 'display' установлено другое значение.

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

run-in и compact

Эти значения свойства в зависимости от контекста создают структурный или строковый блок. Применение свойства к инициальному или компактному блоку осуществляется, исходя из его окончательного статуса (является ли он строковым или структурным блоком). Например, свойство 'white-space' применимо, только если блок становится структурным.

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption

При этих значениях свойства элемент ведет себя как элемент таблицы (ограничения рассматриваются в главе о таблицах).

Необходимо помнить, что хотя в качестве начального значения свойства 'display' используется значение 'inline', правила, содержащиеся в таблице стилей, используемой агентом пользователя по умолчанию, могут переназначить его. Подробную информацию можно найти в приложении при рассмотрении примера таблицы стилей для HTML 4.0.

Далее представлено несколько примеров использования свойства 'display':

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none } /* Не отображать графику */

Конформные агенты пользователей, управляющие отображением HTML-документов, могут игнорировать свойство 'display'.