| Россия, Москва |
Инспектор
Вы можете этот курс.
Опубликован: 06.06.2006 | Уровень: для всех | Доступ: платный
Лекция 10:
Модель визуального форматирования. Детали
Аннотация: Описываются детали модели визуального форматирования.
Ключевые слова: содержащий блок, край заполнения, край содержимого, BODY, таблица, 'width', значение,
Определение "содержащего блока"
Позиция и размер бокса(ов) элемента иногда вычисляются относительно определённого прямоугольника, называемого содержащий блок элемента.
Содержащий блок элемента определяется так:
- Содержащий блок (называемый начальным содержащим блоком), в котором находится корневой элемент, выбирается пользовательским агентом (ПА).
- Для других элементов, если только элемент не позиционирован абсолютно, содержащий блок формируется краем содержимого бокса ближайшего предка уровня блока.
- Если элемент имеет 'position: fixed', то Содержащий блок устанавливается портом просмотра.
-
Если элемент имеет 'position: absolute', то Содержащий блок устанавливается ближайшим предком с 'position', отличным от 'static', следующим образом:
- Если предок - уровня блока, Содержащий блок формируется краем заполнения предка.
- Если предок - инлайн-уровня, Содержащий блок зависит от свойства 'direction' предка:
- Если 'direction' - 'ltr', верхний и левый края содержащего блока являются верхним и левым краями первого бокса, генерируемого предком, а нижний и правый края являются нижним и правым краями содержимого последнего бокса предка.
- Если '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").
