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

Свойство

Описание

margin

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

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

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

margin-top

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

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

margin-right

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

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

margin-bottom

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

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

margin-left

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

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

padding

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

: {X}|{X}%;

padding-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

Задает ширину свободно позиционирования элемента: auto|{X}|{X}%;

height

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

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

position

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

top

Задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя: auto|{Y}|{Y}%; Предопределенное значение 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 работает только для абсолютно позиционированных элементов: rect(Y1, X1, Y2, X2) | auto | inherit

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

Устанавливает максимальную высоту элемента.

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

max-width

Устанавливает максимальную ширину элемента.

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

min-height

Задает минимальную высоту элемента.

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

min-width

Устанавливает минимальную ширину элемента

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

overflow

Управляет отображением содержания блочного элемента, если оно выходит за область заданных размеров: auto | hidden | scroll | visible | inherit. visible – отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden – отображается только область внутри элемента, остальное будет скрыто. scroll – всегда добавляются полосы прокрутки. auto – полосы прокрутки добавляются только при необходимости. inherit – наследует значение родителя.

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, место, которое элемент занимает, остается за ним: visible | hidden | collapse | inherit

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

z-index

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