Содержание
Позиция и размер бокса(ов) элемента иногда вычисляются относительно определённого прямоугольника, называемого содержащий блок элемента.
Содержащий блок элемента определяется так:
Если такого предка нет, край содержимого бокса корневого элемента устанавливает содержащий блок.
Пример(ы):
Содержащие блоки (СБ) без позиционирования в этом документе:
<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 включают относительное позиционирование.
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', его значением является внутренняя ширина элемента.
Условие, определяющее вычисленные значения для этих элементов:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока
(Если стиль рамки - 'none', используется '0' как значение ширины рамки.) Решение данного условия достигается серией замен в следующем порядке:
10.3.8 Абсолютно позиционированные замещаемые элементы
Ситуация напоминает предыдущую, за исключением того, что элемент имеет внутреннюю ширину. Последовательность замен теперь:
| Значение: | <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'.
10.6.2 Инлайн, замещаемые элементы уровня блока, замещаемые элементы при нормальном всплывании и всплывание, замещаемые элементы
Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Если 'height' - 'auto', вычисленное значение будет внутренней высотой.
10.6.3 Уровень блока, незамещаемые элементы при нормальном всплывании и всплывание, незамещаемые элементы
Если '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' используется как значение ширины рамки.) Решение данного уравнения достигается путём проведения ряда замен в следующем порядке:
10.6.5 Абсолютно позиционированные замещаемые элементы
Ситуация подобна предыдущей, за исключением того, что элемент имеет внутреннюю высоту. Последовательность замен теперь:
Иногда необходимо ограничить высоту элементов определёнными рамками. Два свойства выполняют эту функцию:
| Значение: | <length> | <percentage> | inherit |
| Начальное: | 0 |
| Применяется: | ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно высоты содержащего блока |
| Носитель: | визуальный |
| Значение: | <length> | <percentage> | none | inherit |
| Начальное: | none |
| Применяется: | ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно высоты содержащего блока |
| Носитель: | визуальный |
Эти два свойства позволяют авторам ограничить высоту боксов определённым диапазоном. Значения имеют следующий смысл:
Следующий алгоритм описывает, как эти два свойства вводят вычисленное значение свойства 'height':
Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так:
Пустые инлайн-элементы генерируют пустые инлайн-боксы, но эти боксы всё же имеют поля, заполнение, рамки и высоту строки и, таким образом, вычисления выполняются как с элементами, имеющими содержимое.
Заметьте, что если все боксы в строчном боксе выровнены по своему низу, то строчный бокс будет иметь точно такую же высоту, как и самый высокий бокс. Если, однако, боксы выровнены по общей базовой линии, верх и низ строчного бокса могут не касаться верха и низа самого высокого бокса.
10.8.1 Габариты и полугабариты
Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (например, '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' самого элемента |
| Носитель: | визуальный |
Это свойство влияет на вертикальное позиционирование внутри боксов строчного бокса, генерируемых элементом инлайн-уровня. Следующие значения имеют смысл только относительно родительского элемента инлайн-уровня или родительского элемента уровня блока, если этот элемент генерирует анонимные инлайн-боксы; значения не действуют, если такой родитель не существует.
Примечание. Значения этого свойства имеют несколько другой смысл в контексте таблиц. См. подробнее в разделе об алгоритме высоты таблиц.
Остальные значения относятся к строчному боксу, в котором появляется генерируемый бокс:
Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.
⇪