Содержание
Позиция и размер бокса(ов)
элемента
иногда
вычисляются
относительно
определённого
прямоугольника,
называемого содержащий
блок элемента.
Содержащий
блок
элемента
определяется
так:
Если такого предка нет, край содержимого бокса корневого элемента устанавливает содержащий блок.
Содержащие блоки (СБ) без позиционирования в этом документе:
<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").
| Значение: | <length> | <percentage> | auto | inherit |
| Начальное: | auto |
| Применяется: | ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов |
| Наследуется: | нет |
| Процентное: | относительно ширины содержащего блока |
| Носитель: | визуальный |
Это свойство специфицирует ширину содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.
Это свойство не применяется к незамещаемым элементам инлайн-уровня. Ширина боксов незамещаемых инлайн-элементов, это ширина отображаемого внутри них содержимого (до любого относительного смещения дочерних элементов). Напоминаем, что инлайн-боксы всплывают внутри строчных боксов. Ширина строчных боксов задаётся их содержащим блоком, Но может быть уменьшена при наличии поплавков.
Ширина
бокса замещаемого элемента является внутренней и может
масштабироваться ПА, если значение этого
свойства отличается от 'auto'.
Значения имеют дальнейший толк:
Отрицательные значения для 'width' не допускаются.
Это правило фиксирует ширину содержимого параграфа в 100 пикселов:
P { width: 100px }
Вычисленные значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' для элементов зависят от типа генерируемого бокса и друг от друга. В тезисе вычисленные значения - те же, что и специфицированные, с 'auto', замещаемым иным подходящим значением, но есть и исключения. Обязаны быть рассмотрены следующие варианты:
Пункты 1-6 включают относительное позиционирование.
Свойство 'width' не используется. Специфицированное значение 'auto' для 'left', 'right', 'margin-left' либо 'margin-right' становится вычисленным значением '0'.
Специфицированное значение 'auto' для 'left', 'right', 'margin-left' либо 'margin-right' становится вычисленным значением '0'. Специфицированное значение 'auto' для 'width' даёт внутреннюю ширину элемента как вычисленное значение.
Если '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', их вычисленные значения равны.
Если 'left' либо 'right' - 'auto', их вычисленное значение - '0'. Если 'width' специфицировано как 'auto', его значением является внутренняя ширина элемента. Если одно из полей - 'auto', его вычисленное значение задаётся вышеприведённым уравнением. Помимо того, если оба поля - 'auto', их вычисленные значения равны.
Если 'left', 'right', 'width', 'margin-left' либо 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'.
Если 'left', 'right', 'margin-left' либо 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'. Если 'width' - 'auto', его значением является внутренняя ширина элемента.
Условие, определяющее вычисленные значения для этих элементов:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока
(Если жанр рамки - 'none', применяется '0' как значение ширины рамки.) Решение данного данные достигается серией замен в дальнейшем порядке:
Ситуация напоминает предыдущую, за исключением того, что элемент имеет внутреннюю ширину. Последовательность замен сейчас:
| Значение: | <length> | <percentage> | inherit |
| Начальное: | зависит от ПА |
| Применяется: | ко каждым элементам, за исключением незамещаемых инлайн элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно ширины содержащего блока |
| Носитель: | визуальный |
| Значение: | <length> | <percentage> | none | inherit |
| Начальное: | none |
| Применяется: | ко каждом элементам, за исключением незамещаемых инлайн элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно ширины содержащего блока |
| Носитель: | визуальный |
Эти два свойства дозволяют авторам
ограничить ширину бокса определёнными
рамками.
Значения имеют дальнейший толк:
Следующий алгорифм описывает, как эти два свойства воздействуют на вычисленное значение свойства 'width':
ПА может определить неотрицательное минимальное значение для свойства 'min-width', которое (значение) может варьироваться от элемента к элементу и даже зависеть от других свойств. Если 'min-width' выходит за нижнюю рубеж этого лимита из-за того, что было установлено очевидно, либо из-за того, что оно 'auto' и вышеприведённые правила сделают его слишком маленьким, ПА может применять минимальное значение как вычисленное значение.
| Значение: | <length> | <percentage> | auto | inherit |
| Начальное: | auto |
| Применяется: | ко каждым элементам, помимо незамещаемых инлайн-элементов, столбцов и групп столбцов таблицы |
| Наследуется: | нет |
| Процентное: | см. текст |
| Носитель: | визуальный |
Свойство определяет высоту содержимого боксов, генерируемых элементами яруса блока и замещаемыми элементами.
Это качество не используется к
незамещаемым элементам инлайн-уровня. Высота
боксов незамещаемых инлайн-элементов
задаётся значением (допустимо, наследуемым) 'line-height' элемента.
Значения имеют дальнейший толк:
Отрицательные значения 'height' недопустимы.
Следующее правило фиксирует высоту параграфа в 100 пикселов:
P { height: 100px }
Параграф, требующий высоты больше 100 пикселов, будет вызывать переполнение в соответствии со свойством 'overflow'.
Для вычисления значений 'top', 'margin-top', 'height', 'margin-bottom' и 'bottom' обязано быть проведено разграничение между разными видами боксов:
Пункты 1-6 включают относительное позиционирование.
Если 'top', 'bottom', 'margin-top' либо 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Качество 'height' не используется, но высота бокса задаётся свойством 'line-height'.
Если 'top', 'bottom', 'margin-top' либо 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Если 'height' - 'auto', вычисленное значение будет внутренней высотой.
Если 'top', 'bottom', 'margin-top' либо 'margin-bottom' - 'auto', их вычисленное значение - '0'. Если 'height' - 'auto', высота зависит от того, имеет ли элемент дочерние элементы яруса блока. Если он имеет дочерние элементы только инлайн-яруса, высота будет от верха самого верхнего строчного бокса до низа самого нижнего строчного бокса. Если он имеет дочерние элементы яруса блока, это будет расстояние от верхнего края рамки самого верхнего дочернего бокса яруса блока до нижнего края рамки самого нижнего дочернего бокса яруса блока. В расчёт берутся только потомки при типичном всплывании (т.е. боксы-поплавки и безусловно позиционированные боксы игнорируются, а касательно позиционированные боксы рассматриваются без своих смещений). Обратите внимание, что дочерний бокс может быть анонимным боксом.
Для безусловно позиционированных элементов вертикальные размеры обязаны удовлетворять дальнейшему условию:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота содержащего блока
(Если жанр рамки - 'none', '0' применяется как значение ширины рамки.) Решение данного уравнения достигается путём проведения ряда замен в дальнейшем порядке:
Ситуация подобна предыдущей, за исключением того, что элемент имеет внутреннюю высоту. Последовательность замен сейчас:
Иногда нужно ограничить высоту элементов определёнными рамками. Два свойства исполняют эту функцию:
| Значение: | <length> | <percentage> | inherit |
| Начальное: | 0 |
| Применяется: | ко каждому элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно высоты содержащего блока |
| Носитель: | визуальный |
| Значение: | <length> | <percentage> | none | inherit |
| Начальное: | none |
| Применяется: | ко каждому элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно высоты содержащего блока |
| Носитель: | визуальный |
Эти два свойства разрешают авторам ограничить высоту боксов определённым диапазоном. Значения имеют дальнейший толк:
Следующий алгорифм описывает, как эти два свойства вводят вычисленное значение свойства 'height':
Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так:
Пустые инлайн-элементы генерируют пустые инлайн-боксы, но эти боксы всё же имеют поля, заполнение, рамки и высоту строки и, таким образом, вычисления выполняются как с элементами, имеющими содержимое.
Заметьте, что если все боксы в строчном боксе выровнены по своему низу, то строчный бокс будет иметь верно такую же высоту, как и самый высокий бокс. Если, впрочем, боксы выровнены по всеобщей базовой линии, верх и низ строчного бокса могут не касаться верха и низа самого высокого бокса.
Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (скажем, 'line-height' > 1em), может иметься некоторое пространство сверху и снизу от выводимых глифов. Разница между размером шрифта и вычисленным значением 'line-height' именуется leading\габарит. Половина габарита именуется полугабарит.
ПА центрирует глифы по вертикали в инлайн-боксе, добавляя полугабарит сверху и снизу. Скажем, если блок текста имеет высоту '12pt' и значение 'line-height' - '14pt', должно быть добавлено 2pts добавочного пространства: 1pt сверху и 1pt снизу от букв. (Это применимо также и к пустым боксам, как если бы пустой бокс содержал безгранично тесную букву.)
Если значение 'line-height' поменьше размера шрифта, окончательная высота инлайн-бокса будет поменьше, чем размер шрифта, и выводимые глифы будут "просачиваться" за пределы бокса. Если такой бокс касается края строчного бокса, выводимые глифы будут также "просачиваться" в смежный строчный бокс.
Хотя поля, рамки и заполнение незамещаемых элементов не учитываются при подсчёте высоты инлайн-бокса (и, следственно, высоты строчного бокса), они всё же отображаются вокруг инлайн-боксов. Это значит, что если высота строчного бокса короче внешних краёв содержащихся в нём боксов, то фон и цвета заполнения и рамок могут "просачиваться" в смежные строчные боксы. Впрочем в этом случае некоторые ПА могут применять строчный бокс для "обрезки" областей заполнения и рамок (т.е. - не выводить их).
| Значение: | normal | <number> | <length> | <percentage> | inherit |
| Начальное: | normal |
| Применяется: | ко каждым элементам |
| Наследуется: | да |
| Процентное: | относительно размера шрифта самого элемента |
| Носитель: | визуальный |
Если это качество установлено в элементе уровня блока, тот, что (элемент) имеет содержимое, составленное из элементов инлайн-уровня, оно специфицирует минимальную высоту всякого генерируемого инлайн-бокса.
Если
это качество установлено в элементе инлайн-уровня,
оно специфицирует точную высоту
всякого бокса, генерируемого элементом (за
исключением замещаемых инлайн-элементов,
когда высота бокса задаётся свойством 'height').
Значения этого свойства имеют дальнейший
толк:
Эти три правила дают в итоге одно значение высоты строки:
DIV { line-height: 1.2; font-size: 10pt } /* число */
DIV { line-height: 1.2em; font-size: 10pt } /* размер */
DIV { line-height: 120%; font-size: 10pt } /* проценты */
Если элемент содержит текст, выводимый с поддержкой нескольких шрифтов, ПА должен определить значение 'line-height' в соответствии с размером самого большого шрифта.
Вообще, если имеется только одно значение 'line-height' для всех инлайн-боксов параграфа (и нет высоких изображений), вышесказанное гарантирует, что базовые линии последовательных строк верно отделены от 'line-height'. Это главно в тех случаях, когда столбцы текста с разными шрифтами обязаны быть выровнены, скажем, в таблице.
Обратите внимание, что замещаемые элементы имеют свойства 'font-size' и 'line-height', даже если они (свойства) не применяются непринужденно для определения высоты бокса. 'font-size', впрочем, применяется для определения единиц измерения 'em' и 'ex', а 'line-height' задействовано в свойстве 'vertical-align'.
| Значение: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| Начальное: | baseline |
| Применяется: | к инлайн-элементам и элементам 'table-cell' |
| Наследуется: | нет |
| Процентное: | относительно 'line-height' самого элемента |
| Носитель: | визуальный |
Это качество влияет на вертикальное позиционирование внутри боксов строчного бокса, генерируемых элементом инлайн-яруса. Следующие значения имеют толк только касательно родительского элемента инлайн-яруса либо родительского элемента яруса блока, если данный элемент генерирует анонимные инлайн-боксы; значения не действуют, если такой родитель не существует.
Примечание. Значения этого свойства имеют несколько иной толк в контексте таблиц. См. подробнее в разделе об алгоритме высоты таблиц.
Остальные значения относятся к строчному боксу, в котором возникает генерируемый бокс: