Форматирование

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

Свойства:

width - определяет ширину элемента.

Значение указывается всеми величинами, принятыми в CSS.

Пример:

width: 200px;  //  Ширина элемента 200 пикселей Значение по умолчанию - auto

height - определяет высоту элемента.

Значение указывается всеми величинами, принятыми в CSS.

Пример:

height: 100px;  //  Высота элемента 100 пикселей Значение по умолчанию - auto

max-width - определяет максимальную ширину элемента.

Значение указывается всеми величинами, принятыми в CSS.

Пример:

max-width: 300px;  //  Максимальная ширина элемента 300 пикселей

max-height - определяет максимальную высоту элемента.

Значение указывается всеми величинами, принятыми в CSS.

Пример:

max-height: 150px;  //  Максимальная высота элемента 150 пикселей

clear - запрещает обтекание элемента другими с указанной стороны.

Примеры:

clear: both;  //  Запрещает обтекание слева и справа от элемента

clear: left;  //  Запрещает обтекание слева от элемента

clear: none;  //  Разрешает обтекание Значение по умолчанию - none

clip - определяет область обрезания элемента (в виде прямоугольника).

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

Устанавливается координатами точек прямоугольника относительно левого верхнего угла браузера.

Координаты указываются в пикселях или процентах

Данный атрибут работает только когда в классе CSS используется

position: absolute;

Пример:

clip:  rect (40px, 200px, 60px, 20px);

Пояснение:

40px - расстояние до верхней грани прямоугольника по оси X (по вертикали).

200px - расстояние до правой грани прямоугольника по оси Y (по горизонтали).

60px - расстояние до нижней грани прямоугольника по оси X (по вертикали).

80px - расстояние до левой грани прямоугольника по оси Y (по горизонтали).

В данном случае у нас получится прямоугольник размером 20Х120 пикселей, на расстоянии 40 пикселей от верха и 80 пикселей слева.

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

Примеры:

display:  block;  // Элемент отображается как блочный

display:  inline;  // Элемент отображается на одной линии с предыдущим

display:  list-item;  // Элемент отображается как блочный список

display:  none;  // Элемент невиден, но продолжает занимать место

float - определяет по какой стороне выравнивать элемент относительно родительского контейнера.

Примеры:

float:  left;  // Выравнивание по левой стороне

float:  right;  // Выравнивание по правой стороне

float:  none;  // Выравнивание не указывается Значение по умолчанию - none

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

Примеры:

overflow:  visible;  // Элемент виден даже за пределами границ

overflow:  hidden;  // Выступающие части будут обрезаны

overflow:  scroll;  // Выступающие части будут видны с помощью прокрутки

overflow:  auto;  // Полосы прокрутки добавляются только при необходимости.Значение по умолчанию - auto

visibility - определяет видимость элемента.

Примеры:

visibility:  visible;  // Элемент видим