Для правильного применения правил форматирования следует представлять, как в каскадных таблицах стилей происходит форматирование элементов, т. е. на что можно влиять и что можно изменять в отображении элемента.
Модель форматирования каскадных таблиц стилей ориентирована на представление любого элемента HTML в окружении вложенными прямоугольными блоками, как показано на рисунке.
Рис.2.1 Блоковая модель форматирования абзаца
Блок содержимого элемента (самый внутренний блок) отделен от границы отступами. Самым внешним блоком является поле. Свойства таблиц стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. Поле всегда является прозрачным прямоугольником, поэтому его цвет наследует цвет родителя элемента (для абзаца это элемент BODY). Отступ всегда имеет цвет фона самого элемента.
Все перечисленные блоки в совокупности составляют блок форматирования, или отображения элемента, т. е. видимое в окне браузера изображение элемента. Размеры блока форматирования элемента складываются из размеров самого элемента и размеров отступов, границы и полей.
С точки зрения процесса форматирования документа существуют два типа элементов: блоковые и встроенные.
Каждый элемент в модели форматирования имеет свойство display, значение которого определяет, отображается или не отображается (nоnе) элемент, является ли он блоком (block), списком (list-item) или встроенным элементом (inline).
Элементы со значением свойства display равным block или list-item, а также элементы со значением свойства float, отличным от nоnе (не "плавающие" элементы), являются блоковыми элементами. Их форматирование связано с установкой значений соответствующих параметров вложенных блоков, составляющих элемент в целом. На рисунке ниже показаны все параметры, доступные в модели форматирования каскадных таблиц стилей для блоковых элементов.
Рис.2.2 Параметры форматирования блоковых элементов
Параметры "верх" (top) и "низ" (bottom) не применяются к блоковым элементам, они существуют только для встроенных (inline) элементов, речь о которых пойдет ниже.
Ширина (width) элемента — это ширина блока содержимого, и определяется как расстояние между левым и правым внутренними краями. Высота (height) элемента — расстояние между внутренним верхом и низом.
При вертикальном форматировании блоковых, не "плавающих" элементов значения параметров "верхнее поле" и "нижнее поле" определяют минимальное расстояние до границ блоков окружающих их элементов. Если у двух примыкающих элементов определены не нулевые значения параметров полей, то при вертикальном форматировании поля двух элементов сливаются в одно со значением, равным максимальной высоте поля одного из двух элементов. Подобное слияние можно наблюдать для элементов списка UL или OL.
Горизонтальное форматирование элемента определяется значениями семи свойств: левое поле (margin-left), левая граница (border-left), левый отступ (padding-left), ширина (width), Правый отступ (padding-right), правая граница (border-right) и правое поле (margin-right). Сумма значений этих семи параметров всегда равняется ширине элемента-родителя или ширине окна браузера, если элемент не вложен в другой элемент.
По умолчание параметр width имеет значение auto. Если элемент не является замещаемым (в тэге элемента задан параметр SRC), то браузер вычисляет ширину элемента из условия равенства суммы значений семи указанных выше параметров ширине элемента-родителя. Для замещаемого элемента значение ширины автоматически заменяется шириной замещаемого элемента, если только значение ширины установлено в auto. В противном случае размер замещаемого элемента подгоняется под заданную в параметре ширину (процедура подгонки зависит от браузера).
Чтобы удовлетворить условию равенства суммы значений семи параметров ширине элемента-родителя или окна браузера, в рекомендациях Консорциума W3 определено, в каких случаях значения каких параметров устанавливаются браузером в auto.
Свойство float может переводить любой элемент в разряд "плавающих". Это приводит к тому, что указанный элемент выводится из нормального потока отображения и форматируется как блоковый элемент. Например, установка свойства float элемента <IMG> равным left позволяет создать буквицу при выводе абзаца текста, как показано рисунке:
Рис.2.3 Плавающий элемент IMG, представляющий букву Ж
При значении свойства float равным left, элемент сдвигается влево до поля, отступа или границы другого блокового элемента, а нормальный поток отображения будет обтекать его с правой стороны. Текст файла HTML для приведенного примера представлен ниже.
<HEAD>
<STYLE TYPE="text/css"><! --
IMG (float: left)
-- ></STYLE>
</HEAD>
<PXIMG SRC=Ж.gif >или-были в далекие времена далеко на Севере большие и сильные люди. При одном только их виде дрожали все, обитавшие в округе племена.
Таблица стилей определяет все элементы IMG как плавающие элементы со смещением влево. Встроенная в абзац картинка, смещаясь влево, образует буквицу абзаца.
Элементы, которые не форматируются как блоковые, являются встроенными (inline) элементами. Они совместно с другими элементами используют область строки. Обычно, выделяемые в строке элементы (ЕМ, STRONG, в и т. д.) классифицируются как встроенные.
Рассмотрим пример задания встроенных элементов в блоковый элемент абзац Р:
Если ширина абзаца достаточна для отображения всех встроенных элементов в строке, то они отобразятся в одной строке. Если ширина недостаточна, то некоторые элементы могут быть разбиты на два и отображены в двух строках.
