Опубликован: 06.06.2006 | Доступ: свободный | Студентов: 3909 / 694 | Оценка: 4.34 / 4.02 | Длительность: 21:23:00
Лекция 9:

Модель визуального форматирования

Боксы compact/компактные

Бокс compact ведёт себя так:

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

Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого cтрочного бокса блока, но влияет на расчёт высоты cтрочного бокса. Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно cтрочного бокса. Позиция compact-бокса по горизонтали - всегда в поле бокса блока.

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

Следующий пример иллюстрирует compact-бокс:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A compact box example</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Short
        <DD><P>Description goes here.
      <DT>too long for the margin
        <DD><P>Description goes here.
    </DL>
  </BODY>
</HTML>

Этот пример может выглядеть после форматирования так:

short    Description goes here

too long for the margin
         Description goes here

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

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе "Генерируемое содержимое, автоматическая нумерация и списки" .

Втягивающиеся боксы (run-in)

Бокс run-in ведёт себя так:

  • Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-боксом в боксе блока.
  • Иначе бокс run-in становится боксом блока.

Бокс 'run-in' используется для run-in-заголовков, как в этом примере:

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

Этот пример может форматироваться так:

Заголовок run-in. И
  параграф текста, 
  следующий за ним.

Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе "Генерируемое содержимое, автоматическая нумерация и списки" .