10 Модель визуального
форматирования. Детали.
Позиция и размер бокса(ов)
элемента
иногда
вычисляются
относительно
определённого
прямоугольника,
называемого содержащий
блок элемента.
Содержащий
блок
элемента
определяется
так:
- Содержащий
блок (называемый
начальным
содержащим
блоком), в
котором
находится корневой
элемент,
выбирается
пользовательским
агентом (ПА).
- Для других
элементов,
если только
элемент не
позиционирован
абсолютно,
содержащий
блок
формируется
краем
содержимого
бокса
ближайшего
предка
уровня блока.
- Если
элемент
имеет 'position: fixed', то
содержащий
блок
устанавливается
портом
просмотра.
- Если
элемент
имеет 'position: absolute', то
содержащий
блок
устанавливается
ближайшим
предком с 'position',
отличным от 'static',
следующим
образом:
- Если предок -
уровня блока,
содержащий
блок
формируется краем
заполнения
предка.
- Если предок -
инлайн-уровня,
содержащий
блок зависит
от свойства 'direction' предка:
- Если 'direction'
- 'ltr', верхний и
левый края
содержащего
блока
являются
верхним и
левым краями
первого
бокса,
генерируемого
предком, а
нижний и
правый края
являются
нижним и
правым
краями
содержимого
последнего
бокса предка.
- Если '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"). -
'width'
| Значение: | <length> | <percentage> | auto | inherit
| | Начальное: | auto
| | Применяется: | ко
всем
элементам,
кроме
незамещаемых
инлайн-элементов,
рядов
таблиц и
групп рядов
| | Наследуется: | нет
| | Процентное: | относительно
ширины
содержащего
блока
| | Носитель: | визуальный
|
Это
свойство
специфицирует
ширину содержимого
боксов,
генерируемых
элементами
уровня блока
и замещаемыми
элементами. Это
свойство не
применяется
к
незамещаемым
элементам инлайн-уровня.
Ширина
боксов
незамещаемых
инлайн-элементов,
это ширина
отображаемого
внутри них
содержимого (до
любого
относительного
смещения
дочерних
элементов).
Напоминаем,
что инлайн-боксы
всплывают
внутри строчных
боксов. Ширина строчных
боксов задаётся их содержащим блоком, Но
может быть уменьшена при наличии поплавков. Ширина
бокса замещаемого элемента является внутренней и может
масштабироваться ПА, если значение этого
свойства отличается от 'auto'.
Значения имеют следующий смысл:
- <length>
- Специфицирует фиксированную ширину.
- <percentage>
- Специфицирует ширину в процентах.
Проценты вычисляются относительно ширины
содержащего блока
генерируемого бокса.
- 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' как
значение ширины рамки.) Решение данного
условия достигается серией замен в
следующем порядке:
- Если 'left'
имеет значение 'auto' при 'direction' - 'ltr',
'auto' заменяется расстоянием от левого края
содержащего блока до края левого поля
гипотетического бокса, который мог бы быть
первым боксом элемента, если его свойство 'position'
было бы 'static'. (Но вместо того, чтобы
действительно рассчитать этот бокс, ПА
свободны предполагать о его возможной
позиции.) Значение является отрицательным,
если гипотетический бокс находится слева
от содержащего блока.
- Если 'right'
имеет значение 'auto' при 'direction'
- 'rtl', 'auto' заменяется расстоянием от
правого края содержащего блока до края
правого поля того же гипотетического
бокса, что и выше. Значение является
положительным, если гипотетический бокс
находится слева от края содержащего блока.
- Если 'width'
- 'auto', любые оставшиеся 'auto' для 'left'
или 'right'
заменяются на '0'.
- Если 'left', 'right' или 'width' - (ещё) 'auto',
'auto' в 'margin-left'
или 'margin-right'
заменяются на '0'.
- Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto',
уравнение решается с дополнительным
условием: что эти два поля обязаны
получить одинаковые значения.
- Если в данной точке осталось только одно 'auto',
уравнение решается с этим значением.
- Если в данной точке значения
переограниченны, игнорируется значение 'left'
(если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение
решается с этим значением.
Ситуация напоминает предыдущую, за
исключением того, что элемент имеет внутреннюю
ширину. Последовательность замен теперь:
- Если 'width'
- 'auto', оно замещается внутренней шириной
элемента.
- Если 'left'
имеет значение 'auto' при 'direction' - 'ltr',
'auto' замещается расстоянием от левого края
содержащего блока до края левого поля
гипотетического бокса, который мог бы быть
первым боксом элемента, если его свойство 'position'
было бы 'static'. (Но вместо того, чтобы
действительно рассчитать этот бокс, ПА
свободны предполагать о его возможной
позиции.) Значение является отрицательным,
если гипотетический бокс находится слева
от содержащего блока.
- Если 'right'
имеет значение 'auto' при 'direction'
- 'rtl', 'auto' заменяется расстоянием от
правого края содержащего блока до края
правого поля того же гипотетического
бокса, что и выше. Значение является
положительным, если гипотетический бокс
находится слева от края содержащего блока.
- Если 'left'
или 'right' - 'auto', любое 'auto' для 'margin-left'
или 'margin-right' замещается
на '0'.
- Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto',
уравнение решается с дополнительным
условием: что эти два поля обязаны
получить одинаковые значения.
- Если в данной точке осталось только одно 'auto',
уравнение решается с этим значением.
- Если в данной точке значения
переограниченны, игнорируется значение 'left'
(если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение
решается с этим значением.
-
'min-width'
-
| Значение: | <length> | <percentage> | inherit
| | Начальное: | зависит от ПА
| | Применяется: | ко
всем элементам, за исключением
незамещаемых инлайн элементов и
элементов таблицы
| | Наследуется: | нет
| | Процентное: | относительно
ширины содержащего блока
| | Носитель: | визуальный
|
-
'max-width'
-
| Значение: | <length> | <percentage> | none | inherit
| | Начальное: | none
| | Применяется: | ко всем
элементам, за исключением незамещаемых
инлайн элементов и элементов таблицы
| | Наследуется: | нет
| | Процентное: | относительно
ширины содержащего блока
| | Носитель: | визуальный
|
Эти два свойства позволяют авторам
ограничить ширину бокса определёнными
рамками.
Значения имеют следующий смысл:
- <length>
- Специфицирует фиксированную минимальную
и максимальную вычисленную ширину.
- <percentage>
- Специфицирует проценты для определения
вычисленного значения. Проценты
высчитываются относительно ширины
содержащего блока
генерируемого бокса.
- none
- (Только для 'max-width')
Нет ограничений на ширину бокса.
Следующий алгоритм описывает, как эти два
свойства воздействуют на вычисленное
значение свойства 'width':
- Ширина вычисляется (без 'min-width'
и 'max-width') по
вышеприведённым правилам "Вычисление
ширины и полей".
- Если вычисленное значение 'min-width' больше, чем
значение 'max-width',
то 'max-width'
устанавливается в значение 'min-width'.
- Если вычисленная ширина больше, чем 'max-width', вышеприведённые
правила применяются вновь, но на этот раз с
использованием значения 'max-width'
как специфицированного для
'width'.
- Если вычисленная ширина меньше, чем 'min-width', вышеприведённые
правила применяются вновь, но на этот раз с
использованием значения 'min-width'
как специфицированного для
'width'.
ПА может определить неотрицательное
минимальное значение для свойства 'min-width',
которое (значение) может варьироваться от
элемента к элементу и даже зависеть от
других свойств. Если 'min-width'
выходит за нижнюю границу этого лимита из-за
того, что было установлено явно, или из-за
того, что оно 'auto' и вышеприведённые правила
сделают его слишком маленьким, ПА может
использовать минимальное значение как
вычисленное значение.
-
'height'
-
| Значение: | <length> | <percentage> | auto | inherit
| | Начальное: | auto
| | Применяется: | ко
всем элементам, кроме незамещаемых
инлайн-элементов, столбцов и групп
столбцов таблицы
| | Наследуется: | нет
| | Процентное: | см. текст
| | Носитель: | визуальный
|
Свойство определяет высоту содержимого
боксов, генерируемых элементами уровня
блока и замещаемыми
элементами. Это свойство не применяется к
незамещаемым элементам инлайн-уровня. Высота
боксов незамещаемых инлайн-элементов
задаётся значением (возможно, наследуемым) 'line-height' элемента.
Значения имеют следующий смысл:
- <length>
- Специфицирует фиксированную высоту.
- <percentage>
- Специфицирует высоту в процентах.
Проценты высчитываются относительно
высоты содержащего блока
генерируемого бокса. Если высота
содержащего блока не специфицирована явно
(т е. зависит от высоты содержимого),
значение интерпретируется как 'auto'.
- auto
- Высота зависит от значений других
свойств. См. ниже.
Отрицательные значения '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' используется как
значение ширины рамки.) Решение данного
уравнения достигается путём проведения
ряда замен в следующем порядке:
- Если 'top'
имеет значение 'auto', оно заменяется
расстоянием от верхнего края содержащего
блока до края верхнего поля
гипотетического бокса, который мог бы быть
первым боксом элемента, если его свойство 'position'
было бы 'static'. (Но вместо того, чтобы
действительно рассчитать этот бокс, ПА
свободны предполагать о его возможной
позиции.) Значение является отрицательным,
если гипотетический бокс находится сверху
от содержащего блока.
- Если и 'height'
и 'bottom' - 'auto', 'bottom'
заменяется на '0'.
- Если 'bottom'
или 'height' (ещё) имеют значение
'auto', любое 'auto' в 'margin-top'
или 'margin-bottom'
заменяется на '0'.
- Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto',
уравнение решается с помощью
дополнительного условия: что эти два поля
обязаны получить одинаковые значения.
- Если в данной точке имеется только одно
значение 'auto', уравнение решается с этим
значением.
- Если в данной точке значения
переограничены, игнорируется значение 'bottom',
и уравнение решается с этим значением.
Ситуация подобна предыдущей, за
исключением того, что элемент имеет внутреннюю
высоту. Последовательность замен теперь:
- Если 'height'
- 'auto', оно заменяется внутренней
высотой элемента.
- Если 'top'
имеет значение 'auto', оно заменяется расстоянием
от верхнего края содержащего блока до
края верхнего поля гипотетического бокса, который мог бы быть
первым боксом элемента, если его свойство 'position'
было бы 'static'. (Но вместо того, чтобы
действительно рассчитать этот бокс, ПА
свободны предполагать о его возможной
позиции.) Значение является отрицательным,
если гипотетический бокс находится сверху
от содержащего блока.
- Если 'bottom'
- 'auto', 'auto' в 'margin-top' или 'margin-bottom' заменяется
на '0'.
- Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё
'auto', уравнение решается с помощью
дополнительного условия: что эти два поля
обязаны получить одинаковые значения.
- Если в данной точке имеется только одно
значение 'auto', уравнение решается с этим
значением.
- Если в данной точке значения
переограничены, игнорируется значение 'bottom', и уравнение
решается с этим значением.
Иногда необходимо ограничить высоту
элементов определёнными рамками. Два
свойства выполняют эту функцию:
-
'min-height'
-
| Значение: | <length> | <percentage> | inherit
| | Начальное: | 0
| | Применяется: | ко
всем элементам, за исключением
незамещаемых инлайн-элементов и
элементов таблицы
| | Наследуется: | нет
| | Процентное: | относительно
высоты содержащего блока
| | Носитель: | визуальный
|
-
'max-height'
-
| Значение: | <length> | <percentage> | none | inherit
| | Начальное: | none
| | Применяется: | ко всем
элементам, за исключением незамещаемых
инлайн-элементов и элементов таблицы
| | Наследуется: | нет
| | Процентное: | относительно
высоты содержащего блока
| | Носитель: | визуальный
|
Эти два свойства позволяют авторам
ограничить высоту боксов определённым
диапазоном. Значения имеют следующий смысл:
- <length>
- Специфицирует фиксированный минимум и
максимум вычисленной высоты.
- <percentage>
- Специфицирует проценты для определения
вычисленного значения. Проценты
высчитываются относительно высоты содержащего
блока генерируемого бокса. Если высота
содержащего блока не специфицирована явно
(т.е. зависит от высоты содержимого),
процентные значения интерпретируются так
же, как 'auto'.
- none
- (Только для 'max-height')
Высота бокса не ограничена.
Следующий алгоритм описывает, как эти два
свойства вводят вычисленное
значение свойства 'height':
- Высота вычисляется (без 'min-height' и 'max-height') по
вышеприведённым правилам в "Вычислении
высоты и полей".
- Если вычисленное значение 'min-height' больше
значения 'max-height', 'max-height'
устанавливается в значение 'min-height'.
- Если вычисленная высота больше, чем 'max-height', вновь
применяются вышеприведённые
правила, но на этот раз с использованием
значения 'max-height'
как специфицированного значения для 'height'.
- Если вычисленная высота меньше, чем 'min-height', вновь
применяются вышеприведённые
правила, но на этот раз с использованием
значения 'min-height'
как специфицированного значения для 'height'.
Как описано в разделе о контекстах инлайн-форматирования,
ПА заполняют инлайн-боксами вертикальный
стэк строчных боксов. Высота
инлайн-бокса определяется так:
- Вычисляется высота каждого инлайн-бокса
в строчном боксе (см. "Вычисление
высоты и полей" и свойство 'line-height').
- Инлайн-боксы выравниваются по вертикали
в соответствии с их свойствами 'vertical-align'.
- Высота строчного бокса - это расстояние
между верхом самого верхнего бокса и низом
самого нижнего бокса.
Пустые инлайн-элементы генерируют пустые
инлайн-боксы, но эти боксы всё же имеют поля,
заполнение, рамки и высоту строки и, таким
образом, вычисления выполняются как с
элементами, имеющими содержимое. Заметьте,
что если все боксы в строчном боксе
выровнены по своему низу, то строчный бокс
будет иметь точно такую же высоту, как и
самый высокий бокс. Если, однако, боксы
выровнены по общей базовой линии, верх и низ
строчного бокса могут не касаться верха и
низа самого высокого бокса.
Поскольку высота инлайн-бокса может
отличаться от размера шрифта текста бокса (например, 'line-height' > 1em), может
иметься некоторое пространство сверху и
снизу от выводимых глифов. Разница между
размером шрифта и вычисленным значением 'line-height' называется leading\габарит.
Половина габарита называется полугабарит. ПА
центрирует глифы по вертикали в инлайн-боксе,
добавляя полугабарит сверху и снизу.
Например, если блок текста имеет высоту '12pt'
и значение 'line-height' - '14pt', должно
быть добавлено 2pts дополнительного
пространства: 1pt сверху и 1pt снизу от букв. (Это
применимо также и к пустым боксам, как если
бы пустой бокс содержал бесконечно узкую
букву.) Если значение 'line-height'
меньше размера шрифта, окончательная
высота инлайн-бокса будет меньше, чем
размер шрифта, и выводимые глифы будут "просачиваться"
за пределы бокса. Если такой бокс касается
края строчного бокса, выводимые глифы будут
также "просачиваться" в смежный
строчный бокс. Хотя поля, рамки и
заполнение незамещаемых элементов не
учитываются при подсчёте высоты инлайн-бокса
(и, следовательно, высоты строчного бокса),
они всё же отображаются вокруг инлайн-боксов.
Это значит, что если высота строчного бокса
короче внешних краёв
содержащихся в нём боксов, то фон и цвета
заполнения и рамок могут "просачиваться"
в смежные строчные боксы. Однако в этом
случае некоторые ПА могут использовать
строчный бокс для "обрезки" областей
заполнения и рамок (т.е. - не выводить их).
Если это свойство установлено в элементе уровня блока, который (элемент)
имеет содержимое, составленное из
элементов инлайн-уровня,
оно специфицирует минимальную высоту
каждого генерируемого инлайн-бокса. Если
это свойство установлено в элементе инлайн-уровня,
оно специфицирует точную высоту
каждого бокса, генерируемого элементом (за
исключением замещаемых инлайн-элементов,
когда высота бокса задаётся свойством 'height').
Значения этого свойства имеют следующий
смысл:
- normal
- Сообщает в ПА, что нужно установить
вычисленное значение в "приемлемое"
значение на базе размера шрифта элемента.
Значение имеет тот же смысл, что и <number>.
Для 'normal' мы рекомендуем значения в
пределах от 1.0 до 1.2.
- <length>
- Высота бокса устанавливается в эту
величину. Отрицательные значения
недопустимы.
- <number>
-
Вычисленное значение свойства является
числом, умноженным на размер шрифта
элемента. Отрицательные значения
недопустимы. В то же время, число, не
являющееся вычисленным
значением, наследуется.
- <percentage>
- Вычисленное значение
свойства является процентами от
вычисленного размера шрифта элемента.
Отрицательные значения недопустимы.
Пример(ы): Эти
три правила дают в результате одно
значение высоты строки:
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'
-
| Значение: | baseline | sub | super | top | text-top | middle |
bottom | text-bottom | <percentage> | <length> | inherit
| | Начальное: | baseline
| | Применяется: | к
инлайн-элементам и элементам 'table-cell'
| | Наследуется: | нет
| | Процентное: | относительно 'line-height'
самого элемента
| | Носитель: | визуальный
|
Это свойство влияет на вертикальное
позиционирование внутри боксов строчного
бокса, генерируемых элементом инлайн-уровня.
Следующие значения имеют смысл только
относительно родительского элемента
инлайн-уровня или родительского элемента
уровня блока, если этот элемент генерирует анонимные инлайн-боксы;
значения не действуют, если такой родитель
не существует.
Примечание. Значения этого
свойства имеют несколько другой смысл в
контексте таблиц. См. подробнее в разделе об
алгоритме высоты таблиц.
- baseline
- Выравнивает базовую линию бокса с
базовой линией бокса-родителя. Если бокс
не имеет базовой линии, выравнивается низ
бокса с базовой линией родителя.
- middle
- Выравнивает вертикальную среднюю точку
бокса с базовой линией бокса-родителя
плюс половина x-высоты родителя.
- sub
- Понижает базовую линию бокса до
соответствующей позиции подиндексов
родительского бокса. (Это значение не
воздействует на размер шрифта текста
элемента.)
- super
- Повышает базовую линию бокса до
соответствующей позиции надиндексов
родительского бокса. (Это значение не
воздействует на размер шрифта текста
элемента.)
- text-top
- Выравнивает верх бокса с верхом шрифта родительского
элемента.
- text-bottom
- Выравнивает низ бокса с низом шрифта родительского
элемента.
- <percentage>
- Увеличивает (позитивное значение) или
уменьшает (негативное значение) бокс на
эту величину (процент значения 'line-height'). Значение '0%'
это то же, что 'baseline'.
- <length>
- Увеличивает (позитивное значение) или
уменьшает (негативное значение) бокс на
эту величину. Значение '0cm' это то же, что 'baseline'.
Остальные значения относятся к строчному
боксу, в котором появляется генерируемый
бокс:
- top
- Выравнивает верх бокса с верхом
строчного бокса.
- bottom
- Выравнивает низ бокса с низом строчного
бокса.
-
Модель визуального форматирования. Детали. |
| страницы в данном разделе |
| > О спецификации CSS2 |
> Полное описание анонимного бокса блока |
| > Звуковые таблицы стилей |
> Полное описание первого примера форматирования Bach/XML |
| > Полное описание второго примера форматирования Bach/XML |
> Полное описание моделей фона |
| > Модель бокса |
> Полное описание иллюстрации областей бокса |
| > Полное описание примера бокса-списка, показывающего поля,заполнения и рамки |
> Установка значений свойств, Каскадирование и Наследование |
| > Полное описание примера вычисления рядав таблицы и вертикального выравнивания ячеек |
> Пример баннера |
| > Приложение B: Изменения по сравнению с CSS1 |
> Полное описание примера сжатия областей |
| > Цвета и фон |
> Соответствие: требования и рекомендации |
| > Полное описание примера, иллюстрирующего скрытые внутренние рамки |
> Индекс дескрипторов |
| > Полное описание диаграммы примера дерева документа |
> Полное описание примера оттенения текста |
| > Полное описание примера зависающей заглавной буквы. |
> Полное описание примера пунктуации и зависающей заглавной буквы |
| > Полное описание примера перекрывания поплавком элементов с нормальным расположением |
> Полное описание примера того, как поплавки перекрывают боксы с нормальным расположением |
| > Полное описание примера поплавка и обтекания текста |
> Полное описание примера, иллюстрирующего позиционирование относительно позионированного предка |
| > Полное описание примера, иллюстрирующего абсолютное позиционирование |
> Полное описание примера, иллюстрирующего всплывание без 'clear' |
| > Полное описание примера всплывания с 'clear' |
> Полное описание примера всплывания |
| > Полное описание примера нормального расположения |
> Полное описание примера относительного позиционирования |
| > Полное описание примера абсолютного позиционирования относительно начального содержащего блока |
> Шрифты |
| > Полное описание примера фрэймоподобной структуры |
> Генерируемое содержимое, автоматическая нумерация и списки |
| > Приложение D: Грамматика CSS2 |
> Каскадные Таблицы Стилей, Уровень 2 |
| > Индекс |
> Полное описание поведения полей/рамок в разделённом инлайн-боксе |
| > CSS2 Введение |
> Полное описание форм шрифта italic |
| > Полное описание кернинга |
> Полное описание примера расположения заголовка слева от таблицы |
| > Полное описание примера маркёров inside относительно outside |
> Типы носителя |
| > Приложение С: Замечания по реализации и выполнению для шрифтов |
> Полное описание примера несжимаемого 'overflow' |
| > Полное описание примера сжимаемого 'overflow' |
> Полное описание примера соотношений между страничным боксом и листом (бумаги) |
| > Страничные носители |
> Полное описание изображения GUI Windows 95 с описанием шрифтов |
| > Полное описание иллюстрации к определению пиксела |
> Полное описание соотношений с пикселом выводного устройства |
| > Индекс свойств |
> Ссылки |
| > Приложение А: Образец таблицы стилей для HTML 4.0 |
> Селекторы |
| > Синтаксис CSS2 и базовые типы данных |
> Синтаксис CSS2 и базовые типы данных |
| > Полное описание таблицы расходов на путешествие |
> Таблицы |
| > Полное описание примера приоритетов модели сжимающихся рамок |
> Полное описание примера вычисления фона |
| > Полное описание примера расчёта фона ячеек |
> Полное описание примера рядов, разделённых горизонтальными линиями рамки |
| > Полное описание примера модели раздельных рамок |
> Полное описание примера, иллюстрирующего модель сжимающихся рамок |
| > Текст |
> Полное описание примера заголовка над таблицей |
| > Интерфейс пользователя |
> Модель визуального форматирования. Детали. |
| > Визуальные эффекты |
> Модель визуального форматирования |
|
