ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  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. Компактные блоки.

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

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

Компактный блок принимает положение в поле следующим образом: он находится снаружи (слева или справа) от первого внутристрочного блока, но он воздействует на рассчет высоты такого внутристрочного блока. Свойство '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 блок становится блочным блоком.

Блок '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
Применяется:        ко все элементам
Наследование:       нет
Процентная база:    нет
Медиа:              все

Это свойство имеет следующие значения:

block
Это значение приводит к тому, что элемент генерирует главный блочный блок.
inline
Это значение приводит к тому, что элемент генерирует один или более внутристрочных блока.
list-item
Это значение приводит к тому, что элемент (например, LI в HTML) генерирует главный блочный блок и внутристрочный блок списка. Для дополнительной информации о списках и примерах форматирования обратитесь к разделу о списках.
marker
Это значение объявляет сгенерированное содержание перед или после того, как блок становится маркером. Это значение следует использовать только с псевдо-элементами :before и :after, прикрепленными к блочным элементам. В других случаях это значение интерпретируется, как 'inline' (внутристрочное). Обратитесь к разделу о маркерах для получения дополнительной информацией.
none
Это значение приводит к тому, что элемент не формирует блоки с форматирующей структурой (т.е. элемент не влияет на разметку). Элементы наследники не генерируют какие-либо блоки; это поведение нельзя преодолеть установкой свойства 'display' для элементов-наследников.
Пожалуйста, обратите внимание на то, что дисплей со значением 'none' не создает невидимый блок, он не создает блок вообще. CSS включают механизмы, которые дают возможность элементу сформировать блоки в структуре форматирования, которые влияют на форматирование, но сами не видимы. Обратитесь к разделу по видимости для подробной информации.
run-in и compact
Эти значения создают либо блочный, либо внутристрочный блок в зависимости от контекста. Свойства применяются для run-in и компактных блоков, основанных на их заключительном состоянии (внутристрочный уровень или блочный уровень). Например, свойство '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 }      /* Don't display images */

Согласование устройств вывода для HTML может игнорировать свойство 'display'.

← Назад | Вперед →
Copyright © 2006 -  aranea.ru