Евгений Резниченко - Спецификация CSS2

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

Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя другой бокс блока (как P), тогда мы заставляем его иметь боксы блока только внутри себя, перенеся любые инлайн-боксы в анонимный бокс блока .

Эта модель будет применена в следующем примере, если данные правила:

/* Примечание: ПАгенты HTML могут не рассматривать эти правила */ BODY { display: inline } P { display: block }

будут использованы в данном документе HTML:

Содержимое элемента P.

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

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

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

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

[x].Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования.

[x]. Инлайн-бокс compact расположен в поле бокса блока.

[x].Боксы-маркёры имеют позицию также вне бокса блока.

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

Некоторый выделенный текст.

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

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

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

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

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

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

[x].В ином случае compact-бокс становится боксом блока.

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

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

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

Description goes here.

Description goes here.

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

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 ведёт себя так:

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

[x].Иначе бокс run-in становится боксом блока.

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

Заголовок run-in.

И параграф текста, следующий за ним.

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

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

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

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

'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' . См. также раздел Маркёры.