Содержание
Положение и размер блоков, порожденных отдельным элементом, в определенных случаях вычисляются относительно некоторой прямоугольной области, называемой контейнером данного элемента и определяемой следующим образом:
Если такого предка не существует, то контейнер определяется краями информативной области блока, порожденного корневым элементом.
В документе
<HTML>
<HEAD>
<TITLE>Пример контейнеров</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">Это текст первого абзаца...</P>
<P id="p2">Это текст <EM id="em1">
<STRONG id="strong1">второго</STRONG> абзаца.</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").
| Значение: | <длина> | <проценты> | auto | inherit |
| Начальное значение: | auto |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня, строк таблиц и групп строк |
| Наследование: | нет |
| Процентное задание: | относительно ширины контейнера |
| Устройства: | визуального форматирования |
Это свойство задает ширину содержимого блоков, порожденных элементами структурного уровня и замещаемыми элементами.
Данное свойство не применяется к незамещаемым элементам строкового уровня . Ширина блоков, порождаемых такими элементами, равна ширине отображаемого внутри них содержимого (до момента относительного смещения дочерних элементов). Вспомните, что строковые блоки преобразуются в линейные блоки , ширина которых определяется их контейнерами , но может быть в любой момент уменьшена при наличии перемещаемых объектов .
Ширина блока замещаемого элемента является его внутренним параметром и может регулироваться агентом пользователя, если значение этого свойства отлично от 'auto'.
Значения данного свойства имеют следующий смысл:
Отрицательные значения свойства 'width' недопустимы.
Например, согласно следующему правилу ширина содержимого абзацев устанавливается равной 100 пикселам:
P { width: 100px }
Вычисляемые значения свойств 'width' , 'margin-left' , 'margin-right' , 'left' и 'right' элементов находятся в тесной взаимосвязи, а также зависят от типа генерируемого блока. За некоторыми исключениями (в частности, значение 'auto' заменяется в некотором смысле более подходящим значением) вычисляемые значения совпадают с зарезервированными. При этом необходимо различать следующие ситуации:
Первые шесть пунктов включают случай относительного позиционирования.
Свойство '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' принимает значение 'ltr', то аналогичные действия осуществляются со свойством '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'.) Вычисление результата, являющегося следствием данного ограничения, осуществляется путем реализации следующей последовательности подстановок:
В этом случае ситуация аналогична предыдущей за исключением того, что теперь элемент имеет внутреннее значение ширины. При этом последовательность подстановок имеет следующий вид:
| Значение: | <длина> | <проценты> | inherit |
| Начальное значение: | зависит от пользовательского агента |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц |
| Наследование: | нет |
| Процентное задание: | относительно ширины контейнера |
| Устройства: | визуального форматирования |
| Значение: | <длина> | <проценты> | none | inherit |
| Начальное значение: | none |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц |
| Наследование: | нет |
| Процентное задание: | относительно ширины контейнера |
| Устройства: | визуального форматирования |
Эти два свойства позволяют разработчикам ограничивать диапазон значений ширины блоков. Значения этих свойств имеют следующий смысл:
В следующим алгоритме описано, как эти два свойства влияют на вычисляемое значение свойства 'width' :
У агента пользователя существует возможность определения минимального неотрицательного значения для свойства 'min-width' , зависящего от рассматриваемого элемента и других свойств. Если значение свойства 'min-width' опустится ниже установленного минимума вследствие явного задания значения или вычисления в рамках значения 'auto' с использованием вышеописанных правил, агент пользователя может использовать этот минимум в качестве вычисляемого значения.
| Значение: | <длина> | <проценты> | auto | inherit |
| Начальное значение: | auto |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня, столбцов таблиц и групп столбцов |
| Наследование: | нет |
| Процентное задание: | см. текст |
| Устройства: | визуального форматирования |
Это свойство задает высоту содержимого блоков, порождаемых элементами структурного уровня и замещаемыми элементами.
Данное свойство не применяется к незамещаемым элементам строкового уровня . Высота блока незамещаемого элемента строкового уровня определяется значением свойства 'line-height' (которое может быть наследуемым).
Значения данного свойства имеют следующий смысл:
Использование отрицательных значений для свойства 'height' не допускается.
Например, следующее правило устанавливает высоту абзаца равной 100 пикселам:
P { height: 100px }
Абзацы, которым в высоту необходимо больше 100 пикселов, при отображении будут выходить за допустимые пределы в соответствии со свойством 'overflow' .
В зависимости от типа блока следует различать вычисляемые значения свойств 'top' , 'margin-top' , 'height' , 'margin-bottom' и 'bottom' для:
Первые шесть пунктов включают относительное позиционирование.
Если свойство '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'.) Вычисление результата, являющегося следствием данного ограничения, осуществляется путем реализации следующей последовательности подстановок:
В этом случае ситуация аналогична предыдущей, за исключением того, что теперь элемент имеет внутреннее значение ширины. При этом последовательность подстановок имеет следующий вид:
Иногда оказывается полезным ограничивать диапазон значений высоты элементов. Эту возможность предоставляют следующие два свойства:
| Значение: | <длина> | <проценты> | inherit |
| Начальное значение: | 0 |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц |
| Наследование: | нет |
| Процентное задание: | относительно высоты контейнера |
| Устройства: | визуального форматирования |
| Значение: | <длина> | <проценты> | none | inherit |
| Начальное значение: | none |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц |
| Наследование: | нет |
| Процентное задание: | относительно высоты контейнера |
| Устройства: | визуального форматирования |
Эти два свойства позволяют разработчикам ограничивать диапазон значений высоты блоков. Значения данных свойств имеют следующий смысл:
В следующем алгоритме описано, как эти два свойства влияют на вычисляемое значение свойства 'height' :
Как описано в разделе, посвященном контексту форматирования строк , агенты пользователей преобразуют строковые блоки в набор вертикально упорядоченных линейных блоков , высота которых определяется следующим образом:
Пустые элементы строкового уровня генерируют пустые строковые блоки, которые, тем не менее, по-прежнему имеют поля, границы, отступы и высоту строк, а поэтому оказывают влияние на вышеописанные вычисления ничуть не меньше, чем блоки, обладающие содержимым.
Обратите внимание, что в случае выравнивания блоков в линейном блоке по их нижним границам высота линейного блока будет в точности равна высоте самого высокого блока. Однако если эти блоки выровнены по общей базисной линии, то верхняя и нижняя границы линейного блока могут не совпадать с верхней и нижней границами самого высокого блока.
Т.к. высота строкового блока может изменяться в зависимости от размера шрифта текста, содержащегося в этом блоке (например, 'line-height' > 1em), то сверху и снизу от отображаемых глифов возможно наличие свободного места. Разность между размером шрифта и вычисляемым значением свойства 'line-height' называется интерлиньяжем (или межстрочным интервалом). Половина интерлиньяжа называется половинным интерлиньяжем .
Агенты пользователей осуществляют вертикальное центрирование глифов в строковых блоках, добавляя сверху и снизу половинный интерлиньяж. Например, если высота части текста равна '12pt', а значение свойства 'line-height' равно '14pt', то необходимо добавить 2pt дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Эта процедура также применяется и к пустым блокам, если предположить, что пустой блок содержит бесконечно узкую букву.)
Если значение свойства 'line-height' меньше размера шрифта, то в итоге высота строкового блока будет меньше размера шрифта, а отображаемые глифы выйдут за пределы этого блока. Если такой блок соприкасается с краями линейного блока, то отображаемые глифы могут найти на границы смежного линейного блока.
Несмотря на то, что поля, границы и отступы незамещаемых элементов не учитываются при вычислении высоты строкового блока (а следовательно, и при вычислении высоты линейных блоков), они все равно отображаются вокруг него. Это означает, что при значениях высоты линейного блока, не превышающих размеров внешней краевой линии содержащихся в нем блоков, фон и цвета границ и отступов могут найти на смежные линейные блоки. Однако в этом случае некоторые агенты пользователей могут использовать линейный блок для "усечения" областей границ и отступов (т.е. не отображать их).
| Значение: | normal | <число> | <длина> | <проценты> | 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 | <проценты> | <длина> | наследуемое |
| Начальное значение: | baseline |
| Область применения: | строковые и 'table-cell' элементы |
| Наследование: | нет |
| Процентное задание: | относительно значения свойства 'line-height' самого элемента |
| Устройства: | визуального форматирования |
Данное свойство влияет на то, как блокам, порожденным строковыми элементами, будет назначаться позиция в вертикальной плоскости внутри линейного блока. Принимаемые им значения имеют смысл только при их рассмотрении относительно родительского элемента строкового уровня или родительского элемента уровня блока, порождающего безымянные строковые блоки . Эти значения не имеют никакого действия, если такие родительские элементы не существуют.
Примечание. Значения данного свойства имеют несколько иной смысл применительно к таблицам. Дополнительную информацию можно найти в разделе об алгоритмах определения высоты таблицы .
Остальные значения определяются относительно линейного блока, в котором отображается генерируемый блок: