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

2173
0
0

Содержание

9.1 Введение

Эта и последующие главы описывают модель визуального форматирования: то как пользовательские агенты (ПА) обрабатывают дерево документа для визуального носителя.

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

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

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

9.1.1 Порт просмотра

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

9.1.2 Содержащие блоки

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

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

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

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

Высота начального содержащего блока может быть специфицирована свойством 'height' корневого элемента. Если это свойство имеет значение 'auto', высота содержащего блока увеличивается, чтобы приспособиться к содержимому документа.

Начальный содержащий блок не может быть позиционирован или всплывать (т.е. ПА игнорируют свойства 'position' и 'float' корневого элемента).

Детали того, как высчитываются размеры содержащего блока, описаны в следующей главе. 9.2  Управление генерацией боксов

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

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

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

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

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

В этом документе:

<DIV>
  Some text
  <P>More text
</DIV>
(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.

diagram showing the three
boxes for the example above   [D]

На диаграмме изображены три бокса, один из которых анонимный, в примере - верхний.

Другими словами: если бокс блока (такой как сгенерированный в 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, но поля имеют значения 0.

9.2.2 Инлайн-элементы и инлайн-боксы

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

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

Анонимные инлайн-боксы

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

<P>Некоторый <EM>выделенный</em> текст.</P>

элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для "выделенный" - это инлайн-бокс, сгенерированный инлайн-элементом (EM), но другие боксы ("Некоторый" и "текст") являются инлайн-боксами, сгенерированными элементом уровня блока (P). Последние называются анонимными инлайн-боксами, поскольку они не имеют ассоциированного инлайн-элемента.

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

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

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

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

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

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

Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого строчного бокса блока, но влияет на расчёт высоты строчного бокса. Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно строчного бокса. Позиция 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-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.
9.2.4 Втягивающиеся боксы (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-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.

9.2.5 Свойство '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 | inherit
Начальное: inline
Применяется:   все элементы
Наследуется: нет
Процентное: N/A
Носитель: все

Значения этого свойства имеют следующий смысл:

block
Элемент генерирует основной бокс блока.
inline
Элемент генерирует один или более инлайн-боксов.
list-item
Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки.
marker
Объявляет генерируемое содержимое до или после бокса-маркёра. Это значение должно использоваться только вместе с псевдоэлементами :before и :after, присоединёнными к элементам уровня блока. В других случаях это значение интерпретируется как 'inline'. См. также раздел Маркёры.
none
Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства 'display'.

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

run-in и compact
Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам 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'.
9.3 Схемы позиционирования

В CSS2 бокс может находиться в разных слоях в соответствии со схемами позиционирования:

  1. Normal flow/Нормальное расположение. В CSS2 нормальное расположение включает форматирование блока для боксов блока, инлайн-форматирование для инлайн-боксов, относительное позиционирование боксов блока или инлайн и позиционирование compact и run-in боксов.
  2. Floats/Поплавки. В модели поплавка бокс сначала накладывается в соответствии с нормальным расположением, затем изымается из расположения и сдвигается влево или вправо, насколько возможно. Содержимое может обтекать по стороне "всплывания" поплавка.
  3. Абсолютное позиционирование. В модели абсолютного позиционирования бокс удаляется из нормального расположения полностью (это не действует на последующие родственные элементы) и получает позиционирование относительно содержащего блока.
Примечание. Схемы позиционирования CSS2 помогают авторам сделать документы более доступными, позволяя избегать трюков разметки (например, невидимых изображений), используемых для создания эффектов отображения.

9.3.1 Выбор схемы позиционирования: свойство 'position'

Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

'position'
Значение: static | relative | absolute | fixed | inherit
Начальное: static
Применяется:   ко всем элементам, но не к генерируемому содержимому
Наследуется: нет
Процентное: N/A
Носитель: визуальный

Значения имеют следующий смысл:

static
Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.
relative
Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения.
absolute
Позиция бокса (и возможные размеры) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями.
fixed
Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать 'fixed' способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь:

Пример(ы):

@media screen {
  H1#first { position: fixed }
}
@media print {
  H1#first { position: static }
}
9.3.2 Позиционирование и заполнение в боксе: 'top', 'right', 'bottom', 'left'

Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:

'top'
Значение: <length> | <percentage> | auto | inherit
Начальное: auto
Применяется:   к позиционируемым элементам
Наследуется: нет
Процентное: относительно высоты содержащего блока
Носитель: визуальный

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

'right'
Значение: <length> | <percentage> | auto | inherit
Начальное: auto
Применяется:   к позиционируемым элементам
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный

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

'bottom'
Значение: <length> | <percentage> | auto | inherit
Начальное: auto
Применяется:   к позиционируемым элементам
Наследуется: нет
Процентное: относительно высоты содержащего блока
Носитель: визуальный

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

'left'
Значение: <length> | <percentage> | auto | inherit
Начальное: auto
Применяется:   к позиционируемым элементам
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный

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

Значения для этих четырёх свойств имеют следующий смысл:

<length>
Смещением является расстояние от соответствующего края.
<percentage>
Смещением является процент ширины содержащего блока (для 'left' или 'right') или высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'.
auto
Действие этого значения зависит от того, какое из соответствующих свойств также имеет значение 'auto'. См. также разделы ширина и высота абсолютно позиционируемых, незамещаемых элементов.

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

9.4 Нормальное расположение

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

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

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

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

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

9.4.2 Контекст инлайн-форматирования

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

Теги Web


    Вы должны авторизоваться, чтобы оставлять комментарии.

    Радиомастер
    © 2005–2017 radiomaster.ru
    admin@radiomaster.ru
    При использовании материалов данного сайта прямая и явная ссылка на сайт radiomaster.ru обязательна. 1.1234 s