 |
Модель форматирования
|
|
|
|
Для правильного применения правил форматирования следует представлять, как в каскадных таблицах стилей происходит форматирование элементов, т.е. на что можно влиять и что можно изменять в отображении элемента.
Модель форматирования каскадных таблицей стилей ориентирована на представление любого элемента HTML окруженным вложенными прямоугольными блоками, как показано на рис. 2.2.
Блок содержимого элемента (самый внутренний блок) отделен от границы отступами. Самым внешним блоком является поле. Свойства таблиц стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. Поле всегда является прозрачным прямоугольником, поэтому его цвет наследует цвет родителя элемента (для параграфа это элемент BODY). Отступ всегда имеет цвет фона самого элемента.
Все перечисленные блоки в совокупности составляют блок форматирования, или отображения элемента, т.е. видимое в окне браузера изображение элемента. Размеры блока форматирования элемента складываются из размеров самого элемента и размеров отступов, границы и полей.
С точки зрения процесса форматирования документа существуют два типа элементов: блоковые и встроенные.
Блоковые элементы
Каждый элемент в модели форматирования имеет свойство display, значение которого определяет, отображается или не отображается (none) элемент, является ли он блоком (block), списком (list-item) или встроенным элементом (inline).
Элементы со значением свойства display равным block или list-item, а также элементы со значением свойства float, отличным от none (не "плавающие" элементы), являются блоковыми элементами. Их форматирование связано с установкой значений соответствующих параметров вложенных блоков, составляющих элемент в целом. На рис. 2.3 показаны все параметры, доступные в модели форматирования каскадных таблиц стилей для блоковых элементов.
|
|
|
Ширина (width) элемента – это ширина блока содержимого, и определяется как расстояние между левым и правым внутренними краями. Высота (height) элемента – расстояние между внутренним верхом и низом.
При вертикальном форматировании блоковых, не "плавающих" элементов значения параметров "верхнее поле" и "нижнее поле" определяют минимальное расстояние до границ блоков окружающих их элементов. Если у двух примыкающих элементов определены не нулевые значения параметров полей, то при вертикальном форматировании поля двух элементов сливаются в одно со значением, равным максимальной высоте поля одного из двух элементов. Подобное слияние можно наблюдать для элементов 'LI' списка '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.4.
При значении свойства float равным left, элемент сдвигается влево до поля, отступа или границы другого блокового элемента, а нормальный поток отображения будет обтекать его с правой стороны. Текст файла HTML для приведенного примера представлен ниже:
Пример 2.1 "Буквица" в тексте
<HEAD>
<STYLE TYPE="text/css"><!--
IMG {float: left}
--></STYLE>
</HEAD>
<P><IMG SRC=Ж.gif>
или-были в далекие времена далеко на Севере
большие и сильные люди. При одном только их виде
дрожали все, обитавшие в округе племена.
</P>
|
|
|
ER-модель (entity-relationship model)
ER-модель (entity-relationship model)
А – доквадратична зона змішаного тертя при турбулентному режимі; Б – квадратична або автомодельна область при турбулентному режимі.
Адаптационная модель здоровой личности
Алгоритмы имитационного моделирования для пошагового управления модельным временем.
Алгоритмы имитационного моделирования для событийного управления модельным временем.
Американская социально-экономическая модель
Античная модель: отголоски и параллели
АНЬЕЛЛИ И FIAT. ИТАЛЬЯНСКАЯ МОДЕЛЬ
Багатокраїнна модель Солніка.
