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

1438
0
0

 

Содержание

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

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

  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").


10.2 Ширина содержимого: свойство 'width'
'width'
Значение: <length> | <percentage> | auto | inherit
Начальное: auto
Применяется:   ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный

Это свойство специфицирует ширину содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.

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

Ширина бокса замещаемого элемента является внутренней и может масштабироваться ПА, если значение этого свойства отличается от 'auto'.
Значения имеют следующий смысл:

<length>
Специфицирует фиксированную ширину.
<percentage>
Специфицирует ширину в процентах. Проценты вычисляются относительно ширины содержащего блока генерируемого бокса.
auto
Ширина зависит от значений других свойств. См. следующие разделы.

Отрицательные значения для 'width' не допускаются.

Пример(ы):

Это правило фиксирует ширину содержимого параграфа в 100 пикселов:

P { width: 100px }
10.3  Вычисление ширины и полей

Вычисленные значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' для элементов зависят от типа генерируемого бокса и друг от друга. В принципе вычисленные значения - те же, что и специфицированные, с 'auto', замещаемым другим подходящим значением, но есть и исключения. Должны быть рассмотрены следующие варианты:

  1. инлайн, незамещаемые элементы
  2. инлайн, замещаемые элементы
  3. уровень блока, незамещаемые элементы при нормальном всплывании
  4. уровень блока, замещаемые элементы при нормальном всплывании
  5. всплывание, незамещаемые элементы
  6. всплывание, замещаемые элементы
  7. абсолютно позиционированные незамещаемые элементы
  8. абсолютно позиционированные замещаемые элементы

Пункты 1-6 включают относительное позиционирование.
10.3.1 Инлайн, незамещаемые элементы

Свойство 'width' не применяется. Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'.
10.3.2 Инлайн, замещаемые элементы

Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'. Специфицированное значение 'auto' для 'width' даёт внутреннюю ширину элемента как вычисленное значение.
10.3.3 Уровень блока, незамещаемые элементы при нормальном всплывании

Если 'left' или 'right' заданы как 'auto', их вычисленное значение - '0'. Следующее условие обязано соблюдаться между свойствами:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина содержащего блока

(Если стиль рамки - 'none', используйте '0' как ширину рамки.) Если все вышеуказанные имеют специфицированные значения, отличные от 'auto', то говорят, что значения "переограниченны", и одно из вычисленных значений должно будет получить значение, отличное от своего специфицированного. Если свойство 'direction' имеет значение 'ltr', специфицированное значение 'margin-right' игнорируется и новое значение вычисляется так, чтобы сделать равенство верным. Если значение 'direction' - 'rtl', то же самое выполняется для 'margin-left'.

Если имеется только одно значение, специфицированное как 'auto', его вычисленное значение является результатом уравнения.

Если 'width' установлено в 'auto', любые другие значения 'auto' становятся '0', и 'width' является результатом уравнения.

Если и 'margin-left', и 'margin-right' - 'auto', их вычисленные значения равны.
10.3.4 Уровень блока, замещаемые элементы при нормальном всплывании

Если 'left' или 'right' - 'auto', их вычисленное значение - '0'. Если 'width' специфицировано как 'auto', его значением является внутренняя ширина элемента. Если одно из полей - 'auto', его вычисленное значение задаётся вышеприведённым уравнением. Кроме того, если оба поля - 'auto', их вычисленные значения равны.
10.3.5 Всплывание, незамещаемые элементы

Если 'left', 'right', 'width', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'.
10.3.6 Всплывание, замещаемые элементы

Если 'left', 'right', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'. Если 'width' - 'auto', его значением является внутренняя ширина элемента.
10.3.7 Абсолютное позиционирование, незамещаемые элементы

Условие, определяющее вычисленные значения для этих элементов:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока

(Если стиль рамки - 'none', используется '0' как значение ширины рамки.) Решение данного условия достигается серией замен в следующем порядке:

  1. Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' заменяется расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.
  2. Если 'right' имеет значение 'auto' при 'direction' - 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.
  3. Если 'width' - 'auto', любые оставшиеся 'auto' для 'left' или 'right' заменяются на '0'.
  4. Если 'left', 'right' или 'width' - (ещё) 'auto', 'auto' в 'margin-left' или 'margin-right' заменяются на '0'.
  5. Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.
  6. Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.
  7. Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.

10.3.8 Абсолютно позиционированные замещаемые элементы

Ситуация напоминает предыдущую, за исключением того, что элемент имеет внутреннюю ширину. Последовательность замен теперь:

  1. Если 'width' - 'auto', оно замещается внутренней шириной элемента.
  2. Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' замещается расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.
  3. Если 'right' имеет значение 'auto' при 'direction' - 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.
  4. Если 'left' или 'right' - 'auto', любое 'auto' для 'margin-left' или 'margin-right' замещается на '0'.
  5. Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.
  6. Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.
  7. Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.

10.4 Минимальная и максимальная ширина: 'min-width' и 'max-width'
'min-width'
Значение: <length> | <percentage> | inherit
Начальное: зависит от ПА
Применяется:   ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
'max-width'
Значение: <length> | <percentage> | none | inherit
Начальное: none
Применяется:  ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется: нет
Процентное:   относительно ширины содержащего блока
Носитель: визуальный

Эти два свойства позволяют авторам ограничить ширину бокса определёнными рамками.
Значения имеют следующий смысл:

<length>
Специфицирует фиксированную минимальную и максимальную вычисленную ширину.
<percentage>
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно ширины содержащего блока генерируемого бокса.
none
(Только для 'max-width') Нет ограничений на ширину бокса.

Следующий алгоритм описывает, как эти два свойства воздействуют на вычисленное значение свойства 'width':

  1. Ширина вычисляется (без 'min-width' и 'max-width') по вышеприведённым правилам "Вычисление ширины и полей".
  2. Если вычисленное значение 'min-width' больше, чем значение 'max-width', то 'max-width' устанавливается в значение 'min-width'.
Теги Web


    Вы должны авторизоваться, чтобы оставлять комментарии.

    Радиомастер
    © 2005–2013 radiomaster.ru
    admin@radiomaster.ru
    При использовании материалов данного сайта прямая и явная ссылка на сайт radiomaster.ru обязательна. 0.2561 s