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

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

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

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

Вид элемента

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 - элемент не плавающий.

Выравнивание последующего элемента

clear:left|right|both|none

Способ выравнивания следующего за плавающим элемента задаётся значениями:

left - верхнее поле элемента увеличивается так, чтобы на его выравнивание слева плавающий элемент не влиял,
right - верхнее поле элемента увеличивается так, чтобы на его выравнивание справа плавающий элемент не влиял,
both - верхнее поле элемента увеличивается так, чтобы на его выравнивание слева и справа плавающий элемент не влиял,
none - никакие изменения в параметры элемента не вносятся.