Основные принципы и понятия

Перед тем как пойти дальше, давайте кратко просмотрим основные термины компоновки строки, которые будут важны для понимания следующих разделов:

Анонимный текст (anonymous text)
Это любая строка символов, не входящая в состав срочного элемента. Таким образом, в разметке

Я так рад!

последовательности «Я» и «рад!» – анонимный текст. Заметьте, что пробелы являются частью текста, поскольку пробел – такой же символ, как и остальные.

Кегельный квадрат (em box)
Определяется заданным шрифтом, еще известен как квадрат символа. Реальные глифы могут быть выше или ниже, чем их кегельные квадраты. В CSS высоту кегельного квадрата определяет значение свойства font-size.

Область содержимого (content area)
Для незамещаемых элементов есть два варианта определения области содержимого, и спецификация CSS2.1 разрешает агентам пользователя выбирать один из них. Областью содержимого может быть блок, описанный объединенными вместе кегельными квадратами каждого из символов элемента, или ею может быть блок, описанный глифами символов элемента. В этой книге для простоты рассматривается определение кегельными квадратами. В замещаемых элементах область содержимого – это собственная высота элемента плюс все поля, рамки или отступы.

Межстрочный интервал (leading)
Межстрочный интервал – это разница между значениями font-size
и line-height.


Эта разница на самом деле делится на два и добавляется к области содержимого сверху и снизу. Эти дополнения называются, что и не удивительно, половинным межстрочным интервалом. Межстрочные интервалы применяются только к незамещаемым элементам.

Строковый блок (inline box)
Это блок, образуемый путем добавления межстрочного интервала к области содержимого. Для незамещаемых элементов высота строкового блока элемента равна значению line-height. Для замещаемых элементов высота строкового блока элемента эквивалентна области содержимого, поскольку к замещаемым элементам межстрочные интервалы не применяются.

Контейнер строки (line box)
Это наименьший блок, охватывающий самую верхнюю и самую нижнюю точки строковых блоков, находящихся в строке. Иначе говоря, верхний край контейнера строки размещается вдоль вершины самого высокого строкового блока, и низ совпадает с низом строкового блока, расположенного ниже всех. CSS также включает ряд характеристик и полезных концепций, которые следуют из приведенного выше списка терминов и определений:

• Область содержимого – это аналог блока содержимого элемента уровня блока.
• Фон строкового элемента применяется к области содержимого и рамкам.
• Любая рамка строкового элемента окружает область содержимого плюс все отступы и рамки.
• Отступы, рамки и поля незамещаемых элементов не оказывают влияния на вертикальное форматирование строковых элементов или генерируемых ими блоков; т.


е. они не влияют на высоту строкового блока элемента (и соответственно строкового блока, в котором расположен этот элемент).
• Поля и рамки замещаемых элементов влияют на высоту строкового блока этого элемента и косвенно на высоту строкового блока строки, в которой находится этот элемент. Необходимо отметить еще вот что: в строке происходит вертикальное выравнивание строковых блоков в соответствии со значениями их свойства vertical-align.

Перед тем как двигаться дальше, шаг за шагом рассмотрим процесс построения контейнера строки, который поможет вам понять, как происходит совмещение различных частей строки при определении ее высоты:

1. Определяем высоту строкового блока каждого элемента строки в такой последовательности:
a. Находим значения свойств font-size и line-height каждого строкового незамещаемого элемента и любого текста, который не является частью дочернего строкового элемента. Затем вычитаем значение font-size из line-height и получаем межстрочный интервал блока. Межстрочный интервал делится на два и добавляется сверху и снизу кегельных квадратов.
b. Находим значения свойств height, margin-top, margin-bottom, pad-ding-top, padding-bottom, border-top-width и border-bottom-width для каждого замещаемого элемента и суммируем их.

2.


Для каждой области содержимого определяем, какая ее часть находится выше базовой линии всей строки и какая ее часть находится под базовой линией. Это непростая задача: должно быть известно положение базовой линии каждого элемента и каждого куска анонимного текста и базовой линии самой строки, затем они все должны быть выстроены в ряд. Кроме того, нижний край замещаемого элемента располагается на базовой линии строки.

3. Определяем вертикальное смещение всех элементов, для которых задано vertical-align. Это скажет вам, на сколько вверх или вниз будет смещен этот строковый блок элемента, и изменит местоположение элемента относительно базовой линии.

4. Теперь, когда вы знаете местоположение всех строковых блоков, окончательно вычисляем высоту контейнера строки. Для этого просто добавьте расстояние между базовой линией и вершиной самого высоко расположенного строкового блока к расстоянию между базовой линией и низом расположенного ниже всех строкового блока. Рассмотрим подробно весь процесс, дающий ключ к грамотному стилевому оформлению строкового содержимого.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание