|
|
Книги-onlineПодробное описание модели визуального форматирования 10 Подробное описание модели визуального форматированияСодержание
10.1 Определение "контейнера"Положение и размер блоков, порожденных отдельным элементом, в определенных случаях вычисляются относительно некоторой прямоугольной области, называемой контейнером данного элемента и определяемой следующим образом: Если такого предка не существует, то контейнер определяется краями информативной области блока, порожденного корневым элементом. В документе <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> не осуществляется позиционирование элементов. Назначение контейнеров здесь происходит следующим образом:
Если осуществить позиционирование элемента "div1": #div1 { position: absolute; left: 50px; top: 50px } то после этого роль его контейнера будет выполнять не "body", а начальный контейнер (т.к. при этом не найдется ни одного позиционированного блока, порожденного предком рассматриваемого элемента). Если осуществить позиционирование элемента "em1": #div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px } то таблица контейнеров примет вид:
После позиционирования "em1" его контейнером становится ближайший позиционированный блок, порожденный его предком (т.е. элементом "div1"). 10.2 Ширина содержимого: свойство 'width'
'width'
Это свойство задает ширину содержимого блоков, порожденных элементами структурного уровня и замещаемыми элементами. Данное свойство не применяется к незамещаемым элементам строкового уровня. Ширина блоков, порождаемых такими элементами, равна ширине отображаемого внутри них содержимого (до момента относительного смещения дочерних элементов). Вспомните, что строковые блоки преобразуются в линейные блоки, ширина которых определяется их контейнерами, но может быть в любой момент уменьшена при наличии перемещаемых объектов. Ширина блока замещаемого элемента является его внутренним параметром и может регулироваться агентом пользователя, если значение этого свойства отлично от 'auto'. Значения данного свойства имеют следующий смысл: <длина> Определяет фиксированное значение ширины. <проценты> Определяет значение ширины в процентах. Процентное соотношение вычисляется относительно ширины контейнера генерируемого блока. auto Ширина зависит от значений других свойств. См. следующие ниже разделы.Отрицательные значения свойства 'width' недопустимы. Например, согласно следующему правилу ширина содержимого абзацев устанавливается равной 100 пикселам: P { width: 100px } 10.3 Определение значений ширины и полейВычисляемые значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' элементов находятся в тесной взаимосвязи, а также зависят от типа генерируемого блока. За некоторыми исключениями (в частности, значение 'auto' заменяется в некотором смысле более подходящим значением) вычисляемые значения совпадают с зарезервированными. При этом необходимо различать следующие ситуации: Первые шесть пунктов включают случай относительного позиционирования. 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' принимает значение 'ltr', то аналогичные действия осуществляются со свойством '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'.) Вычисление результата, являющегося следствием данного ограничения, осуществляется путем реализации следующей последовательности подстановок: 10.3.8 Замещаемые абсолютно позиционируемые элементыВ этом случае ситуация аналогична предыдущей за исключением того, что теперь элемент имеет внутреннее значение ширины. При этом последовательность подстановок имеет следующий вид: 10.4 Минимальное и максимальное значения ширины: 'min-width' и 'max-width'
'min-width'
'max-width'
Эти два свойства позволяют разработчикам ограничивать диапазон значений ширины блоков. Значения этих свойств имеют следующий смысл: <длина> Задает фиксированное минимальное и максимальное вычисляемое значение ширины. <проценты> Задает процентное соотношение для определения вычисляемого значения. Процентное соотношение вычисляется относительно ширины контейнера генерируемого блока. none (Только для свойства 'max-width') На ширину блока не накладывается никаких ограничений.В следующим алгоритме описано, как эти два свойства влияют на вычисляемое значение свойства 'width': У агента пользователя существует возможность определения минимального неотрицательного значения для свойства 'min-width', зависящего от рассматриваемого элемента и других свойств. Если значение свойства 'min-width' опустится ниже установленного минимума вследствие явного задания значения или вычисления в рамках значения 'auto' с использованием вышеописанных правил, агент пользователя может использовать этот минимум в качестве вычисляемого значения. 10.5 Высота содержимого: свойство 'height'
'height'
Это свойство задает высоту содержимого блоков, порождаемых элементами структурного уровня и замещаемыми элементами. Данное свойство не применяется к незамещаемым элементам строкового уровня. Высота блока незамещаемого элемента строкового уровня определяется значением свойства 'line-height' (которое может быть наследуемым). Значения данного свойства имеют следующий смысл: <длина> Определяет фиксированное значение высоты. <проценты> Определяет высоту в процентах. Процентное соотношение вычисляется относительно высоты контейнера генерируемого блока. Если высота контейнера не задана явно (т.е. она зависит от высоты содержимого), то это значение интерпретируется как 'auto'. auto Значение высоты зависит от значений других свойств. См. ниже.Использование отрицательных значений для свойства 'height' не допускается. Например, следующее правило устанавливает высоту абзаца равной 100 пикселам: P { height: 100px } Абзацы, которым в высоту необходимо больше 100 пикселов, при отображении будут выходить за допустимые пределы в соответствии со свойством 'overflow'. 10.6 Определение значений высоты и полейВ зависимости от типа блока следует различать вычисляемые значения свойств 'top', 'margin-top', 'height', 'margin-bottom' и 'bottom' для: Первые шесть пунктов включают относительное позиционирование. 10.6.1 Незамещаемые элементы строкового уровняЕсли свойство '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', то значение высоты зависит от того, имеются ли у этого элемента какие-либо дочерние элементы уровня блока или нет. Если у него имеются дочерние элементы только строкового уровня, то высота равна расстоянию от верхней границы самого верхнего линейного блока до нижней границы самого нижнего линейного блока. Если у него имеются дочерние элементы уровня блока, то высота равна расстоянию от верхнего края границы самого верхнего дочернего блока структурного уровня до нижнего края границы самого нижнего дочернего блока структурного уровня. При этом учитываются только дочерние элементы, принадлежащие нормальному потоку (т.е. перемещаемые и абсолютно позиционируемые блоки игнорируются, а относительно позиционируемые блоки рассматриваются без их отступов). Обратите внимание, что дочерние блоки могут быть безымянными блоками. 10.6.4 Незамещаемые абсолютно позиционируемые элементыДля абсолютно позиционируемых элементов вертикальные размеры должны удовлетворять следующему ограничению: 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота контейнера (Если свойство стиля границы принимает значение 'none', то в качестве значения ширины границы используется значение '0'.) Вычисление результата, являющегося следствием данного ограничения, осуществляется путем реализации следующей последовательности подстановок: 10.6.5 Замещаемые абсолютно позиционируемые элементыВ этом случае ситуация аналогична предыдущей, за исключением того, что теперь элемент имеет внутреннее значение ширины. При этом последовательность подстановок имеет следующий вид: 10.7 Минимальное и максимальное значения высоты: 'min-height' и 'max-height'Иногда оказывается полезным ограничивать диапазон значений высоты элементов. Эту возможность предоставляют следующие два свойства:
'min-height'
'max-height'
Эти два свойства позволяют разработчикам ограничивать диапазон значений высоты блоков. Значения данных свойств имеют следующий смысл: <длина> Задает фиксированное минимальное и максимальное вычисляемое значение высоты. <проценты> Задает процентное соотношение для определения вычисляемого значения. Процентное соотношение вычисляется относительно высоты контейнера генерируемого блока. Если высота контейнера не задана явно (т.е. она зависит от высоты содержимого), то значение процентного соотношения интерпретируется как 'auto'. none (Только для свойства 'max-height'.) На высоту блока не накладывается никаких ограничений.В следующем алгоритме описано, как эти два свойства влияют на вычисляемое значение свойства 'height': 10.8 Определение высоты строки: свойства 'line-height' и 'vertical-align'Как описано в разделе, посвященном контексту форматирования строк, агенты пользователей преобразуют строковые блоки в набор вертикально упорядоченных линейных блоков, высота которых определяется следующим образом: Пустые элементы строкового уровня генерируют пустые строковые блоки, которые, тем не менее, по-прежнему имеют поля, границы, отступы и высоту строк, а поэтому оказывают влияние на вышеописанные вычисления ничуть не меньше, чем блоки, обладающие содержимым. Обратите внимание, что в случае выравнивания блоков в линейном блоке по их нижним границам высота линейного блока будет в точности равна высоте самого высокого блока. Однако если эти блоки выровнены по общей базисной линии, то верхняя и нижняя границы линейного блока могут не совпадать с верхней и нижней границами самого высокого блока. 10.8.1 Интерлиньяж и половинный интерлиньяжТ.к. высота строкового блока может изменяться в зависимости от размера шрифта текста, содержащегося в этом блоке (например, 'line-height' > 1em), то сверху и снизу от отображаемых глифов возможно наличие свободного места. Разность между размером шрифта и вычисляемым значением свойства 'line-height' называется интерлиньяжем (или межстрочным интервалом). Половина интерлиньяжа называется половинным интерлиньяжем. Агенты пользователей осуществляют вертикальное центрирование глифов в строковых блоках, добавляя сверху и снизу половинный интерлиньяж. Например, если высота части текста равна '12pt', а значение свойства 'line-height' равно '14pt', то необходимо добавить 2pt дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Эта процедура также применяется и к пустым блокам, если предположить, что пустой блок содержит бесконечно узкую букву.) Если значение свойства 'line-height' меньше размера шрифта, то в итоге высота строкового блока будет меньше размера шрифта, а отображаемые глифы выйдут за пределы этого блока. Если такой блок соприкасается с краями линейного блока, то отображаемые глифы могут найти на границы смежного линейного блока. Несмотря на то, что поля, границы и отступы незамещаемых элементов не учитываются при вычислении высоты строкового блока (а следовательно, и при вычислении высоты линейных блоков), они все равно отображаются вокруг него. Это означает, что при значениях высоты линейного блока, не превышающих размеров внешней краевой линии содержащихся в нем блоков, фон и цвета границ и отступов могут найти на смежные линейные блоки. Однако в этом случае некоторые агенты пользователей могут использовать линейный блок для "усечения" областей границ и отступов (т.е. не отображать их).
'line-height'
Если это свойство применяется к элементу уровня блока, содержимое которого состоит из элементов строкового уровня, то оно определяет минимальное значение высоты каждого порождаемого им строкового блока. Если это свойство применяется к элементу строкового уровня, то оно определяет точное значение высоты каждого порождаемого им блока. (Исключение составляют замещаемые элементы строкового уровня, в которых высота блока задается свойством 'height'.) Значения этого свойства имеют следующий смысл: normal Сообщает агентам пользователей о необходимости задать "адекватную" величину вычисляемого значения, исходя из размера шрифта элемента. Это значение означает то же, что и <число>. Для 'normal' рекомендуется задавать вычисляемое значение в диапазоне от 1.0 до 1.2. <длина> Определяет значение высоты блока. Отрицательные значения не допускаются. <число> Вычисляемым значением данного свойства является некоторое число, умноженное на значение размера шрифта данного элемента. Отрицательные значения не допускаются. Наследуется число, а не вычисляемое значение. <проценты> Вычисляемым значением данного свойства является соответствующее процентное значение, умноженное на вычисленное значение размера шрифта данного элемента. Отрицательные значения не допускаются.В представленном ниже примере в результате выполнения любого из трех правил получается одно и то же значение высоты строки: 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'.
'vertical-align'
Данное свойство влияет на то, как блокам, порожденным строковыми элементами, будет назначаться позиция в вертикальной плоскости внутри линейного блока. Принимаемые им значения имеют смысл только при их рассмотрении относительно родительского элемента строкового уровня или родительского элемента уровня блока, порождающего безымянные строковые блоки. Эти значения не имеют никакого действия, если такие родительские элементы не существуют. Примечание. Значения данного свойства имеют несколько иной смысл применительно к таблицам. Дополнительную информацию можно найти в разделе об алгоритмах определения высоты таблицы. Остальные значения определяются относительно линейного блока, в котором отображается генерируемый блок: top Осуществляется выравнивание верхней границы блока относительно верхней границы линейного блока. bottom Осуществляется выравнивание нижней границы блока относительно нижней границы линейного блока.Внимание! Если у вас не получилось найти нужную информацию, используйте рубрикатор или воспользуйтесь поиском . книги по программированию исходники компоненты шаблоны сайтов C++ PHP Delphi скачать |
|