|
||
|
aranea.ru || Спецификация CSS2 | 9.2. Формирование управляющего блока.
9.2. Формирование управляющего блока.9.2.1. Блочные элементы и блочные блоки. Анонимные блочные блоки.9.2.2. Внутристрочные элементы и внутристрочные блоки. Анонимные внутристрочные блоки. 9.2.3. Компактные блоки. 9.2.4. Run-in блок (блок вдвигаемого текста). 9.2.5. Свойство 'display'. Следующие разделы описывают типы блоков, которые могут формироваться в CSS2. Тип блока влияет, в частности, на его поведение в модели визуального форматирования. Свойство ‘display’, описанное ниже, определяет тип блока. 9.2.1. Блочные элементы и блочные блоки.Блочные элементы (block-level element) – это такие элементы документа-источника, которые форматируются визуально, как блоки (например, параграфы). Несколько значений свойства ‘display’ создают блочные элементы: 'block', 'list-item', 'compact', 'run-in' и ‘table’. Блочные элементы формируют главный блочный блок, который содержит только блоки с блоками. Главный блочный блок учреждает объемлющий блок для блоков-наследников и для сформированного содержания, а также он является блоком, вовлеченным в любую схему позиционирования. Главные блочные блоки участвуют в контексте блочного форматирования. Некоторые блочные элементы генерируют дополнительные блоки вне главного: элементы ‘list-item’ и элементы с маркерами. Эти дополнительные блоки размещаются с учетом главного блока.Анонимные блочные блоки.В документе, подобному следующему: <DIV> Some text <P>More text </DIV> (допускаем, что DIV и Р оба имеют значение ‘display: block’), элемент DIV, как оказывается, имеет два содержания: внутристрочное и блочное. Для облегчения определения форматирования, мы допускаем, что есть анонимный блок вокруг строки “Some text”.  [D]Диаграмма, показывающая три блока, из которых один – анонимный (верхний). Другими словами: если блочный блок (сформированный для выше указанного элемента DIV) имеет другой блок с блоками внутри него (такой как Р), то мы усилим его наличием только одного блочного блока внутри него, заключая любые внутристрочные блоки в анонимный блок. Эта модель будет применяться в следующем примере, если правила:
/* Note: HTML UAs may not respect these rules */
BODY { display: inline }
P { display: block }
будут применяться в этом HTML-документе: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> This is anonymous text before the P. <P>This is the content of P. </> This is anonymous text after the P. </BODY> Элемент BODY содержит порцию (С1) анонимного текста с последующим блочным элементом, который сопровождается порцией (С2) анонимного текста. Результирующий блок будет анонимным блочным блоком для элемента BODY, содержащего анонимный блочный блок вокруг С1, блочный блок Р и другой анонимный блочный блок вокруг С2. Свойства анонимных блоков наследуются от вложенного не анонимного блока (в примере: один для DIV). Ненаследуемые свойства имеют свои начальные значения. Например, передняя часть анонимного блока наследуется от DIV, но поля будут равны 0. 9.2.2. Внутристрочные элементы и внутристрочные блоки.Внутристрочные элементы – это такие элементы документа-источника, которые не формируют новые блоки содержания; содержание распределяется по строкам (например, выделенные участки текста внутри параграфа, встроенные изображения и т.д.). Несколько значений свойства ‘display’ делает элементы внутристрочными: 'inline', 'inline-table', 'compact' и 'run-in'. Внутристрочные элементы генерируют внутристрочные блоки. Внутристрочные блоки могут участвовать в нескольких контекстах форматирования:
Анонимные внутристрочные блоки.В документе, подобному следующему: <P>Some <EM>emphasized</em> text</P> Элемент Р генерирует блочный блок с несколькими внутристрочными блоками внутри него. Блок для "выделения" ("emphasized") является внутристрочным блоком, сформированным элементом (ЕМ), но другие блоки ("Some" и "text") являются внутристрочными блоками, сгенерированными блочным элементом (Р). Последний блок называют анонимным внутристрочным блоком, так как он не имеет связанного элемента внутристрочного уровня. Такие анонимные внутристрочные блоки наследуют свойства от их родительских блочных блоков. Ненаследуемые свойства имеют свои начальные значения. В данном примере, цвет анонимных начальных блоков наследуется от Р, а фон является прозрачным. Если ясно из контекста, подразумевающего анонимный блок, то в этих спецификациях и анонимные внутристрочные блоки, и анонимные блочные блоки называются просто анонимными блоками. Существует больше типов анонимных блоков, возникающие при форматировании таблицы. 9.2.3. Компактные блоки.Компактный блок ведет себя следующим образом:
Компактный блок принимает положение в поле следующим образом: он находится снаружи (слева или справа) от первого внутристрочного блока, но он воздействует на рассчет высоты такого внутристрочного блока. Свойство 'vertical-align' компактного блока определяет вертикальное положение компактного блока по отношению к такому внутристрочному блоку. Горизонтальное положение компактного блока всегда находится в поле блочного блока. Элемент, который не может быть отформатирован в одной строке, не может размещаться в поле следующего блока. Например, элемент 'compact' в HTML, который содержит элемент BR, будет всегда форматироваться, как блочный блок (принимаемый стиль по умолчанию для BR, который вставляет новую строку). Для установки многострочного текста в поле, часто более уместно свойство 'float'. Следующий пример иллюстрирует компактный блок.
<!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' может использоваться для выравнивания компактного элемента внутри поля: против левого края поля ('left'), против правого края ('right') или по центру поля ('center'). Значение 'justify' не применяется, и используют либо 'left', либо 'right', в зависимости от 'direction' блочного элемента, в чьем поле форматируется компактный элемент. ('left', если направление - 'ltr', или 'right', если оно - 'rtl'). Обратитесь к разделу по генерированному содержанию для подробной информации о том, как компактные блоки взаимодействуют с генерированным содержанием. 9.2.4. Run-in блок (блок вдвигаемого текста).Run-in блок ведет себя следующим образом:
Блок 'run-in' полезен для вставляемых (run-in) заголовков, как в следующем примере:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A run-in box example</TITLE>
<STYLE type="text/css">
H3 { display: run-in }
</STYLE>
</HEAD>
<BODY>
<H3>A run-in heading. </H3>
<P>And a paragraph of text that
follows it.
</BODY>
</HTML>
Этот пример может быть отформатирован, как: A run-in heading. And a paragraph of text that follows it. Свойства run-in элемента наследуется от своего родителя в дереве источника, а не от блочного блока, частью которого он становится визуально. Обратитесь к разделу по генерированному содержанию для подробной информации о том, как вставляемые (run-in) блоки взаимодействуют с формированным содержанием. 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
Применяется: ко все элементам
Наследование: нет
Процентная база: нет
Медиа: все
Это свойство имеет следующие значения:
Обратите внимание на то, что хотя начальное значение 'display' является 'inline', стилевая таблица по умолчанию для устройства вывода может подавлять это значение. Смотрите пример стилевой таблицы для HTML 4.0 в приложении. Ниже приводятся примеры свойства 'display':
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none } /* Don't display images */
Согласование устройств вывода для HTML может игнорировать свойство 'display'. |
