Опубликован: 06.06.2006 | Уровень: для всех | Доступ: платный
Лекция 10:

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

Аннотация: Описываются детали модели визуального форматирования.

Определение "содержащего блока"

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

Содержащий блок элемента определяется так:

  1. Содержащий блок (называемый начальным содержащим блоком), в котором находится корневой элемент, выбирается пользовательским агентом (ПА).
  2. Для других элементов, если только элемент не позиционирован абсолютно, содержащий блок формируется краем содержимого бокса ближайшего предка уровня блока.
  3. Если элемент имеет 'position: fixed', то Содержащий блок устанавливается портом просмотра.
  4. Если элемент имеет 'position: absolute', то Содержащий блок устанавливается ближайшим предком с 'position', отличным от 'static', следующим образом:

    1. Если предок - уровня блока, Содержащий блок формируется краем заполнения предка.
    2. Если предок - инлайн-уровня, Содержащий блок зависит от свойства 'direction' предка:
      1. Если 'direction' - 'ltr', верхний и левый края содержащего блока являются верхним и левым краями первого бокса, генерируемого предком, а нижний и правый края являются нижним и правым краями содержимого последнего бокса предка.
      2. Если 'direction' - 'rtl', верхний и правый края содержащего блока являются верхним и правым краями первого бокса, генерируемого предком, а нижний и левый края являются нижним и левым краями содержимого последнего бокса предка.

    Если такого предка нет, край содержимого бокса корневого элемента устанавливает Содержащий блок.

Содержащие блоки (СБ) без позиционирования в этом документе:

<HTML>
   <HEAD>
      <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">This is text in the first paragraph...</P>
      <P id="p2">This is text <EM id="em1"> in the 
      <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
      </DIV>
   </BODY>
</HTML>

устанавливаются так:

Для бокса, генерируемого СБ устанавливается
body начальным СБ (зависит от ПА)
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2

Если позиция "div1":

#div1 { position: absolute; left: 50px; top: 50px }

то его содержащий блок - уже не <body>; им становится начальный содержащий блок (поскольку отсутствуют другие позиционированные боксы предка).

Также, если позиция "em1":

#div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

таблица содержащих блоков будет:

Для бокса, генерируемого СБ устанавливается
body начальным СБ
div1 начальным СБ
p1 div1
p2 div1
em1 div1
strong1 em1

При позиционировании "em1", его содержащим блоком становится ближайший позиционированный бокс предка (т.е. тот, который сгенерирован "div1").

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск