Управление отображением

В этом разделе рассматриваются специальные средства управления отображением элементов. С помощью свойства display задаётся принадлежность элемента определённой категории.

Позиции задаются свойствами смещения top от верхнего края вниз, left - от левого края вправо, right - от правого края влево и bottom - от нижнего вверх. Элементу, для которого не указан режим абсолютного позиционирования, можно указать плавающее позиционирование свойством float.

Таблица 2.6. Свойства управления отображением
Свойство	Описание	Умолчание	Применение
display	Вид элемента	inline	Ко всем элементам
position	Способ размещения	static	Ко всем элементам кроме сгенерированных
top	Верхняя координата	auto	К позиционируемым элементам
bottom	Нижняя координата	auto	К позиционируемым элементам
left	Левая координата	auto	К позиционируемым элементам
right	Правая координата	none	К позиционируемым элементам
float	Вид смещения	auto	Ко всем элементам кроме сгенерированных и позиционированных
clear	Выравнивание после плавающего элемента	none	К блочным элементам

Вид элемента

display:block|inline|list-item|marker|none|run-in|compact display:table|inline-table|table-row-group|table-column|table-column-group|table-header-group|table-footer-group|table-row|table-cell|table-caption

• block - блочный элемент,

• inline - внутристрочный элемент,

• list-item - элемент списка,

• marker - генерируемый элемент перед или после блока,

• none - блок не генерируется,

• run-in - блок вдвигаемого текста,

• compact - блок занимающий поле,

• table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption - табличные элементы.

Способ размещения

position:static|relative|absolute|fixed

• static - статическое, обычное размещение в порядке описания слева направо сверху вниз, при необходимости вставляются разрывы строк и страниц,

• relative - относительное, тоже обычное, но можно дополнительно сместить элемент от своей позиции свойствами top, left, bottom и right.

• absolute - абсолютное, позиция (размер) задаются свойствами top, left, bottom и right относительно родительского блока,

• fixed - фиксированное, как и абсолютное, но элемент фиксируется к позиции просмотра (не перемещается при скроллинге).

Вид смещения

float:left|right|none

Способ размещения плавающего элемента в объемлющем блоке (например, иллюстрация на заполненной текстом странице) задаётся следующими значениями:

• left - плавающий элемент смещается влево,

• right - плавающий элемент смещается вправо,

• none - элемент не плавающий.