Представление документа в виде специальных областей – блоков

Свойство

Описание

margin

Задает ширину полей между элементами страницы и его соседями.

margin: {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}];

Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему.

margin-top

Задает верхнее поле между элементом страницы и его соседями сверху.

margin-top: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет устанавливать поле самостоятельно.

margin-right

Задает правое поле между элементом страницы и его соседями справа.

margin-right: auto|{X}|{X}%;

margin-bottom

Задает нижнее поле между элементом страницы и его соседями снизу.

margin-bottom: auto|{Y}|{Y}%;

margin-left

Задает левое поле между элементом страницы и его соседями слева.

margin-left: auto|{X}|{X}%;

padding

Задает отступ между элементом страницы и различными границами.

padding: {X}|{X}%;

padding-top

Задает расстояние между элементом страницы и верхней границей.

pading-top: {Y}|{Y}%;

Значение по умолчанию 0, для тега <td> 1.

padding-right

Задает расстояние между элементом страницы и правой границей.

pading-right: {X}|{X}%;

padding-bottom

Задает отступ между элементом страницы и нижней границей.

pading-bottom: {Y}|{Y}%;

padding-left

Задает расстояние между элементом страницы и левой границей.

pading-left: {X}|{X}%;

width

Задает ширину свободно позиционирования элемента.

width: auto|{X}|{X}%;

height

Задает высоту свободно позиционированного элемента.

height: auto|{X}|{X}%;

position

static – блок элемента позиционируется в соответствии с основным потоком форматирования; relative – положение блока элемента вычисляется по алгоритму, используемому для схемы static, потом блок смещается из полученного положения в соответствии со значениями свойств left и top. absolute - положение блока элемента указывается с помощью свойств left, top, right и bottom, относительно контейнера данного элемента. fixed - положение блока элемента рассчитывается по алгоритму, используемому для схемы absolute, но после позиционирования блок элемента привязывается либо к области просмотра - для устройств, не осуществляющих разбиение документа на страницы, либо к странице - соответственно для устройств разбивающих документ на страницы.

top

Задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя.

top: auto|{Y}|{Y}%;

Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно. Значение по умолчанию auto

bottom

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

bottom: auto|{Y}|{Y}%;

left

Задает горизонтальную позицию левой границы свободно позиционированного элемента относительно родителя.

left: auto|{X}|{X}%;

right

Задает горизонтальную позицию правой границы свободно позиционированного элемента относительно родителя.

right: auto|{X}|{X}%;

float

Определяет обтекание элемента другими слева или справа вместо помещения под ним.

float: none|left|right;

left –выравнивает элемент страницы по левому краю; right – по правому краю

clear

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

clear: none | left | right | both | inherit

clip

Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. clip работает только для абсолютно позиционированных элементов.

clip: rect(Y1, X1, Y2, X2) | auto | inherit

display

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе

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

none – скрыть блок, освободив место, занимаемое им на странице

block – начать блок с новой строки, закончить переходом на новую строку

inline – считать блок целиком одним из символов текстовой строки

inline-block – свиду inline, а внутри — block

list-item – маркированный элемент списка

run-in – начинается как block, заканчивается как inline

inline-table – таблица с внешними свойствами как inline

table – позиционируется в тексте как таблица

table-caption – поз. как заголовок таблицы

table-cell – поз. как ячейка таблицы

table-column – поз. как столбец таблицы

table-column-group –поз. как группа столбцов таблицы

table-footer-group –поз. как подпись таблицы

table-header-group –поз. как надпись таблицы

table-row –поз. как строка таблицы

table-row-group –поз. как группа строк таблицы

max-height

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height.

max-height: значение | проценты | none | inherit

max-width

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width.

max-width: значение | проценты | none | inherit

min-height

Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height.

min-height: значение | проценты | inherit

min-width

Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width, max-width и min-width.

min-width: значение | проценты | inherit

overflow

Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

overflow: auto | hidden | scroll | visible | inherit

visible – отображается все содержание элемента, даже за пределами установленной высоты и ширины.

hidden – отображается только область внутри элемента, остальное будет скрыто.

scroll – всегда добавляются полосы прокрутки.

auto – полосы прокрутки добавляются только при необходимости.

inherit – наследует значение родителя.

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним.

visibility: visible | hidden | collapse | inherit

visible – отображает элемент как видимый.

hidden – элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.

collapse – если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.

inherit –наследует значение родителя.

z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

z-index: число | auto | inherit

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже.

auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент.

inherit –наследует значение родителя.