Модель визуального форматирования. Детали.
предыдущий следующий содержание свойства индекс
Содержание
Позиция и размер бокса(ов) элемента иногда вычисляются относительно определённого прямоугольника, называемого содержащий блок элемента.
Содержащий блок элемента определяется так:
Illustration of containing blocks
>is is text secondparagraph.
Ширина бокса замещаемого элемента является внутренней и может масштабироваться ПА, если значение этого свойства отличается от 'auto'.
Значения имеют следующий смысл:
><leng>> Специфицирует фиксированную ширину.
<percentage> Специфицирует ширину в процентах. Проценты вычисляются относительно ширины содержащего блока генерируемого бокса.
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', то говорят, что значения "переограниченны", и 1 из вычисленных значений должно будет получить значение, отличное от своего специфицированного. Если свойство 'direction' имеет значение 'ltr', специфицированное значение 'margin-right' игнорируется и новое значение вычисляется так, чтобы сделать равенство верным. Если значение 'direction' - 'rtl', то же самое выполняется для 'margin-left'.
Если имеется только 1 значение, специфицированное как 'auto', его вычисленное значение является результатом уравнения.
Если 'width' установлено в 'auto', любые другие значения 'auto' становятся '0', и 'width' является результатом уравнения.
Если и 'margin-left', и 'margin-right' - 'auto', их вычисленные значения равны.
10.3.4 Уровень блока, замещаемые элементы при нормальном всплывании
Если 'left' или 'right' - 'auto', их вычисленное значение - '0'. Если 'width' специфицировано как 'auto', его значением является внутренняя ширина элемента. Если 1 из полей - '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 Абсолютно позиционированные замещаемые элементы
Ситуация напоминает предыдущую, за исключением того, что элемент имеет внутреннюю ширину. Последовательность замен теперь:
'min-width'
'max-width'
Эти 2 свойства позволяют авторам ограничить ширину бокса определёнными рамками.
Значения имеют следующий смысл:
><leng>> Специфицирует фиксированную минимальную и максимальную вычисленную ширину.
<percentage> Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно ширины содержащего блока генерируемого бокса.
none
(Только для 'max-width') Нет ограничений на ширину бокса.
Следующий алгоритм описывает, как эти 2 свойства воздействуют на вычисленное значение свойства 'width':
ПА может определить неотрицательное минимальное значение для свойства 'min-width', которое (значение) может варьироваться от элемента к элементу и даже зависеть от других свойств. Если 'min-width' выходит за нижнюю границу этого лимита из-за того, что было установлено явно, или из-за того, что оно 'auto' и вышеприведённые правила сделают его слишком маленьким, ПА может использовать минимальное значение как вычисленное значение.
'height'
Свойство определяет высоту содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.
Это свойство не применяется к незамещаемым элементам инлайн-уровня. Высота боксов незамещаемых инлайн-элементов задаётся значением (возможно, наследуемым) 'line-height' элемента.
Значения имеют следующий смысл:
><leng>> Специфицирует фиксированную высоту.
<percentage> Специфицирует высоту в процентах. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т е. зависит от высоты содержимого), значение интерпретируется как 'auto'.
auto Высота зависит от значений других свойств. См. ниже.
Отрицательные значения 'height' недопустимы.
Пример:
Следующее правило фиксирует высоту параграфа в 100 пикселов:
Параграф, требующий высоты более 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 Абсолютно позиционированные замещаемые элементы Ситуация подобна предыдущей, за исключением того, что элемент имеет внутреннюю высоту. Последовательность замен теперь:
Иногда необходимо ограничить высоту элементов определёнными рамками. 2 свойства выполняют эту функцию:
'min-height'
'max-height'
Эти 2 свойства позволяют авторам ограничить высоту боксов определённым диапазоном. Значения имеют следующий смысл:
><leng>> Специфицирует фиксированный минимум и максимум вычисленной высоты.
<percentage> Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как 'auto'.
none
(Только для 'max-height') Высота бокса не ограничена.
Следующий алгоритм описывает, как эти 2 свойства вводят вычисленное значение свойства 'height':
Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так:
Пустые инлайн-элементы генерируют пустые инлайн-боксы, но эти боксы всё же имеют поля, заполнение, рамки и высоту строки и, таким образом, вычисления выполняются как с элементами, имеющими содержимое.
Заметьте, что если все боксы в строчном боксе выровнены по своему низу, то строчный бокс будет иметь точно такую же высоту, как и самый высокий бокс. Если, однако, боксы выровнены по общей базовой линии, верх и низ строчного бокса могут не касаться верха и низа самого высокого бокса.
10.8.1 Габариты
и полугабариты Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (например, 'line-height' >1em), может иметься некоторое пространство сверху и снизу от выводимых глифов. Разница между размером шрифта и вычисленным значением 'line-height' называется leading \габарит. Половина габарита называется полугабарит.
ПА центрирует глифы по вертикали в инлайн-боксе, добавляя полугабарит сверху и снизу. Например, если блок текста имеет высоту '12pt' и значение 'line-height' - '14pt', должно быть добавлено 2pts дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Это применимо также и к пустым боксам, как если бы пустой бокс содержал бесконечно узкую букву.)
Если значение 'line-height' меньше размера шрифта, окончательная высота инлайн-бокса будет меньше, чем размер шрифта, и выводимые глифы будут "просачиваться" за пределы бокса. Если такой бокс касается края строчного бокса, выводимые глифы будут также "просачиваться" в смежный строчный бокс.
Хотя поля, рамки и заполнение незамещаемых элементов не учитываются при подсчёте высоты инлайн-бокса (и, следовательно, высоты строчного бокса), они всё же отображаются вокруг инлайн-боксов. Это значит, что если высота строчного бокса короче внешних краёв содержащихся в нём боксов, то фон и цвета заполнения и рамок могут "просачиваться" в смежные строчные боксы. Однако в этом случае некоторые ПА могут использовать строчный бокс для "обрезки" областей заполнения и рамок (т.е. - не выводить их).
'line-height'
Если это свойство установлено в элементе уровня блока, который (элемент) имеет содержимое, составленное из элементов инлайн-уровня, оно специфицирует минимальную высоту каждого генерируемого инлайн-бокса.
Если это свойство установлено в элементе инлайн-уровня, оно специфицирует точную высоту каждого бокса, генерируемого элементом (за исключением замещаемых инлайн-элементов, когда высота бокса задаётся свойством 'height').
Значения этого свойства имеют следующий смысл:
normal Сообщает в ПА, что нужно установить вычисленное значение в "приемлемое" значение на базе размера шрифта элемента. Значение имеет тот же смысл, что и <number>. Для 'normal' мы рекомендуем значения в пределах от 1.0 до 1.2.
><leng>> Высота бокса устанавливается в эту величину. Отрицательные значения недопустимы.
<number> Вычисленное значение свойства является числом, умноженным на размер шрифта элемента. Отрицательные значения недопустимы. В то же время, число, не являющееся вычисленным значением, наследуется.
<percentage> Вычисленное значение свойства является процентами от вычисленного размера шрифта элемента. Отрицательные значения недопустимы.
Пример:
Эти 3 правила дают в результате 1 значение высоты строки:
Если элемент содержит текст, выводимый с помощью нескольких шрифтов, ПА должен определить значение 'line-height' в соответствии с размером самого большого шрифта.
Вообще, если имеется только 1 значение 'line-height' для всех инлайн-боксов параграфа (и нет высоких изображений), вышесказанное гарантирует, что базовые линии последовательных строк точно отделены от 'line-height'. Это важно в тех случаях, когда столбцы текста с различными шрифтами должны быть выровнены, например, в таблице.
Обратите внимание, что замещаемые элементы имеют свойства 'font-size' и 'line-height', даже если они (свойства) не используются непосредственно для определения высоты бокса. 'font-size', однако, используется для определения единиц измерения 'em' и 'ex', а 'line-height' задействовано в свойстве 'vertical-align'.
Это свойство влияет на вертикальное позиционирование внутри боксов строчного бокса, генерируемых элементом инлайн-уровня. Следующие значения имеют смысл только относительно родительского элемента инлайн-уровня или родительского элемента уровня блока, если этот элемент генерирует анонимные инлайн-боксы ; значения не действуют, если такой родитель не существует.
Примечание. Значения этого свойства имеют несколько другой смысл в контексте таблиц. См. подробнее в разделе об алгоритме высоты таблиц.
baseline Выравнивает базовую линию бокса с базовой линией бокса-родителя. Если бокс не имеет базовой линии, выравнивается низ бокса с базовой линией родителя.
middle Выравнивает вертикальную среднюю точку бокса с базовой линией бокса-родителя плюс половина x-высоты родителя.
sub Понижает базовую линию бокса до соответствующей позиции подиндексов родительского бокса. (Это значение не воздействует на размер шрифта текста элемента.)
super Повышает базовую линию бокса до соответствующей позиции надиндексов родительского бокса. (Это значение не воздействует на размер шрифта текста элемента.)
text-top Выравнивает верх бокса с верхом шрифта родительского элемента.
text-bottom Выравнивает низ бокса с низом шрифта родительского элемента.
<percentage> Увеличивает (позитивное значение) или уменьшает (негативное значение) бокс на эту величину (процент значения 'line-height'). Значение '0%' это то же, что 'baseline'.
><leng>> Увеличивает (позитивное значение) или уменьшает (негативное значение) бокс на эту величину. Значение '0cm' это то же, что 'baseline'.
Остальные значения относятся к строчному боксу, в котором появляется генерируемый бокс:
top Выравнивает верх бокса с верхом строчного бокса.
bottom Выравнивает низ бокса с низом строчного бокса.
предыдущий следующий содержание свойства индекс
Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.
Значение: ><leng>>|<percentage>|inherit
Начальное: зависит от ПА
Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Значение: ><leng>>|<percentage>|none|inherit
Начальное: none
Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
10.5 e-height-property>Высота содержимого: свойство 'height'
Значение: ><leng>>|<percentage>|auto|inherit
Начальное: auto
Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов и групп столбцов таблицы
Наследуется: нет
Процентное: см. текст
Носитель: визуальный
p{height:100px}
10.6 Вычисление высоты и полей
10.6.1 Инлайн, незамещаемые элементы
10.6.4 Абсолютно позиционированные незамещаемые элементы
10.7 Минимальная и максимальная высота: 'min-height' и 'max-height'
Значение: ><leng>>|<percentage>|inherit
Начальное: 0
Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
Наследуется: нет
Процентное: относительно высоты содержащего блока
Носитель: визуальный
Значение: ><leng>>|<percentage>|none|inherit
Начальное: none
Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
Наследуется: нет
Процентное: относительно высоты содержащего блока
Носитель: визуальный
10.8 Подсчёт высоты строк: свойства 'line-height' и 'vertical-align'
Значение: normal|<number>|><leng>>|<percentage>|inherit
Начальное: normal
Применяется: ко всем элементам
Наследуется: да
Процентное: относительно размера шрифта самого элемента
Носитель: визуальный
DIV{line-height:1.2;font-size:10pt}/*число*/
DIV{line-height:1.2em;font-size:10pt}/*размер*/
DIV{line-height:120%;font-size:10pt}/*проценты*/
Значение: baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|><leng>>|inherit
Начальное: baseline
Применяется: к инлайн-элементам и элементам 'table-cell'
Наследуется: нет
Процентное: относительно 'line-height' самого элемента
Носитель: визуальный
