2015-09-06
179
| Свойство стиля | Описание свойства | Значения | Значение по умолчанию |
| position | алгоритм позиционирования | static - обычный блок, заданные свойства top и left игнорируются; relative - свойства top и left смещают блок относительно его нормального положения в общем потоке данных; absolute - блок изымается из потока данных и позиционируется в соответствии со свойствами top, left, right или bottom относительно ближайшего по вложенности вмещающего его позиционированного контейнера; fixed - блок позиционируется как и в случае значения absolute, а потом фиксируется относительно некоторого объекта (например, области просмотра - для устройств без разбивки - в этом случае не смещается при прокрутке) | static |
| top | вертикальное смещение блока относительно верха контейнера | auto, размер, процент (относительно высоты контейнера) | auto |
| right | горизонтальное смещение блока относительно правой границы контейнера | auto, размер, процент (относительно ширины контейнера) | auto |
| bottom | вертикальное смещение блока относительно низа контейнера | auto, размер, процент (относительно высоты контейнера) | auto |
| left | горизонтальное смещение блока относительно левой границы контейнера | auto, размер, процент (относительно ширины контейнера) | auto |
| float | задает смещение блока, вследствие чего блок будет обтекаться текстом контейнера | none, left, right | none |
| clear | задает управление потоком после смещенного блока | none, left, right, both | none |
| z-index | позиционный уровень блока; блок с большим свойством z-index располагается над блоком с меньшим свойством z-index | auto - свойство z-index присваивается в порядке описания элементов в исходном коде, число | auto |
| display | тип структурного блока, порождаемого HTML-элементом, которому приписано данное свойство стиля; говоря чуть более человеческим языком, это свойство указывает на поведение и, следовательно, отображение данного HTML-элемента. Например, значение display:inline заставляет элемент (насколько это возможно) встраиваться в строку данных; значение display:block выводит его с новой строки и позволяет задать элементу свойства блока; значение display:none исключает элемент из потока и вообще не показывает его и т.д. | 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 | inline |
Для большинства значений свойства display трудно придумать живой пример, не вдаваясь в тонкости модели визуального форматирования. Вот, например, вариант описания стиля, запрещающий показ графики:
img { display: none }
В определенной ситуации (когда выключается показ HTML-элемента) свойство display может перекликаться со свойством visibility.
