Общие положения
В предыдущей главе мы рассмотрели генерацию объемлющих прямоугольников для отдельных элементов. Здесь мы изучим, как обозреватель просматривает дерево элементов и отображает их на визуальном носителе, т. е. то, как объемлющие прямоугольники располагаются относительно друг друга.
В процессе отображения документа для каждого элемента обозреватель генерирует нуль или более объемлющих прямоугольников. Внешний вид и расположение этих прямоугольников определяется следующими параметрами:
размерами прямоугольника, которые задаются свойствами границы, заполнителя и рамки;
типом прямоугольника, который задается свойством display;
схемой позиционирования элемента, которая задается свойством position;
взаимоотношениями элементов в дереве документа;
внешней информацией (например, размером окна отображения, собственными размерами графических образов и т. п.).
Далее мы рассмотрим, как именно происходит генерация объемлющих прямоугольников в зависимости от перечисленных параметров.
Типы объемлющих прямоугольников: свойство display
| Синтаксис: | display: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | | Начально: | inline | | Применимо: | ко всем элементам | | Наследуемо: | нет | | Проценты: | не используются | | Устройства: | все |
| Поддержка : |  | Поддерживает только inline, block, list-item, none (4.0+),table-header-group и table-footer-group (5.0+) | | |  | Поддерживает только inline, block, list-item и none (4.0+) |
Свойство display задает тип объемлющего прямоугольника для данного элемента. CSS поддерживает следующие типы прямоугольников:
| block | Блочный элемент. Соответствует блочным элементам HTML, т. е. отображается как отдельный абзац. При его отображении генерируется главный прямоугольник блока, в котором располагаются объемлющие прямоугольники потомков данного элемента. | | inline | Текстовый элемент. Соответствует текстовым элементам HTML, т. е. отображается как текстовые строки внутри текущего абзаца, точнее внутри главного прямоугольника соответствующего блока. | | list-item | Элемент списка. Отображается как блочный элемент с добавлением к нему маркера элемента списка (подробнее см. этот пункт). | | marker | Маркер. Подробности см. в этом пункте . | | run-in | Присоединяемый элемент. Если следующий за данным элемент является блочным, то данный элемент форматируется как его первый текстовый элемент. В противном случае отображается как обычный блочный элемент. | | compact | Компактный элемент. Если следующий за данным элемент является блочным, то данный элемент форматируется как однострочный текстовый элемент, и если он помещается на левой или правой границе последующего блока (граница задается свойством direction вмещающего блока), то на ней он и отображается. В противном случае отображается как обычный блочный элемент. | | none | Элемент и все его потомки игнорируются при отображении. | | table | Блочная таблица. Подробности см. в этом пункте. | | inline-table | Текстовая таблица. Подробности см. в этом пункте. | | table-row-group | Группа строк таблицы. Подробности см. в этом пункте. | | table-header-group | Группа надзаголовков таблицы. Подробности см. в этом пункте. | | table-footer-group | Группа подзаголовков таблицы. Подробности см. в этом пункте. | | table-row | Строка таблицы. Подробности см. в этом пункте. | | table-column-group | Группа столбцов таблицы. Подробности см. в этом пункте. | | table-column | Столбец таблицы. Подробности см. в этом пункте. | | table-cell | Ячейка таблицы. Подробности см. в этом пункте. | | table-caption | Заголовок таблицы. Подробности см. в этом пункте. |
Хотя начальное значение этого свойства inline, таблица стилей обозревателя, принятая по умолчанию, может подменять это значение для отдельных элементов. Подробности см. в Рекомендуемой таблице стилей для HTML. Примеры задания типов отображения для некоторых элементов:
P { display: block } /* Блочный элемент */
EM { display: inline } /* Текстовый элемент */
LI { display: list-item } /* Элемент списка */
IMG { display: none } /* Не отображать графические образы */
Схема позиционирования: свойство position
| Синтаксис: | position: static | relative | absolute | fixed | inherit | | Начально: | static | | Применимо: | ко всем элементам, кроме генерируемого оглавления | | Наследуемо: | нет | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : | | Поддерживает только static, relative и absolute (4.0+) | | | | Поддерживает только relative и absolute; реализовано с ошибками (4.0+) |
Свойство position задает схему позиционирования данного элемента. CSS поддерживает следующие схемы позиционирования:
| static | Статический элемент. Не имеет специального позиционирования, отображается в обычном потоке элементов. | | relative | Относительно позиционируемый элемент. Для него сначала генерируется объемлющий прямоугольник в обычном потоке элементов, а затем смещается на величины, заданные свойствами left и top. | | absolute | Абсолютно позиционируемый элемент. Позиция элемента вычисляется относительно позиции его ближайшего позиционированного предка (или относительно элемента BODY, если все предки не позиционированы) на основании свойств left и top. Помимо позиции элемента можно задать и его размер свойствами right и bottom. | | fixed | Фиксированный элемент. Этот элемент является абсолютно позиционированным, но дополнительно зафиксирован относительно некой отправной точки. Для непрерывных устройств отображения его позиция зафиксирована относительно окна обозревателя, т. е. он остается неподвижным при прокрутке окна. Для страничных устройств его позиция фиксируется относительно страницы. |
Абсолютно позиционированные элементы выпадают из обычного потока отображения элементов документа. Их позиция не зависит от окружающих объектов, а определяется относительно ближайшего позиционированного предка. Если заданная позиция уже занята другим элементом, то оба элемента будут отображаться в одном месте, перекрывая друг друга. То, какой из элементов находится выше, а какой ниже, задается свойством z-index. Абсолютно позиционированные элементы не имеют границ, но имеют заполнители и рамки. Пример абсолютно позиционированного графического образа внутри относительно позиционированного элемента DIV:
<DIV style="position: relative; left: 0; top: 0; height: 50px">
<P>Часть текста будет скрыта рисунком, потому что он позиционирован поверх текста.</P>
<IMG src="pict\5_leaf.gif" style="position: absolute; left: 300px; top: 0">
</DIV>
Часть текста будет скрыта рисунком, потому что он позиционирован поверх текста. 
Относительно позиционированные элементы отображаются в обычном потоке документа, но с заданным смещением. Следующий пример показывает, как можно создать относительным позиционированием текст в верхнем индексе:
<P>Пример вывода текста в верхнем индексе:
<SPAN style="position: relative; top: -3px">xyz</SPAN>.</P>
Этот пример будет отображаться так:
Пример вывода текста в верхнем индексе: xyz.
Элемент, который следует за относительно позиционированным элементом, отображается так, как если бы этот элемент не был смещен. Элемент, который следует за абсолютно позиционированным элементом, отображается в той позиции, которую занимал бы этот элемент, не будучи абсолютно позиционирован.
1 2 3 4
8 8 8
| |
*
Обратная связь