Лекция № 5

ФОРМАТИРОВАНИЕ БЛОКОВ

I. Атрибут displayпредназначен для указания типа блока. Может принимать значения:

1. block – блок занимает всю ширину родительского элемента. Значение blockпо умолчанию имеют теги <div> и <p>;
2. inline – блок занимает только необходимое для отображения содержимого пространство. Это значение по умолчанию имеют теги <span>, <b>и др.;
3. inline-block – аналогично inline, но дополнительно можно задать размеры и другое форматирование, применяемое для блочного элемента. Результат аналогичен встраиванию тега <img> в строку;
4. none – содержимое блока не отображается;

II. Атрибуты widthи heightзадают соответственно ширину и высоту блока:

div { width: 100px; height: 100px }

III. Атрибут overflow задает поведение блока, чье содержимое вылезает за его границы. Может принимать значения:

1. visible –блок расширяется так, чтобы его содержимое отобразилось полностью (значение по умолчанию. Если размеры заданы явным образом, то содержимое будет выходить за границы блока, а размеры самого блока останутся прежними;
2. hidden –то, что невлезает в границы блока, скрывается;
3. scroll –у блока в любом случае отображаются полосы прокрутки;
4. auto – если содержимое не помещается в блок, то добавляются полосы прокрутки.

IV. Атрибут float определяет выравнивание блока. Может принимать значения:

1. left – выравнивание блока по левой стороне, а другие элементы обтекают его справа;
2. right – выравнивание блока по правой стороне, а другие элементы обтекают его слева;
3. none – выравнивание отсутствует.

V.Атрибут clear разрешает или запрещает обтекание, может принимать значения:

1. both – запрещает обтекание по обеим сторонам;
2. left – запрещает обтекание по левой стороне;
3. right – запрещает обтекание по правой стороне;
4. none – отменяет запрет на обтекание, установленный с помощью both, left, right.

VI. Атрибут position позволяет задать способ позиционирования блока. Может принимать значения:

1. static – статистическое позиционирование (по умолчанию). Положение элемента в окне Web-браузера определяется его положением в тексте HTML-документа;
2. relative – относительное позиционирование. Координаты отсчитываются относительно позиции, в которую Web-браузер поместил бы элемент, будь он статистически позиционированным;
3. absolute – абсолютное позиционирование. Координаты отсчитываются относительно левого верхнего угла родительского элемента;
4. fixed – фиксированное позиционирование. Координаты отсчитываются относительно левого верхнего угла окна Web-браузера. При прокрутке содержимого окна блок не смещается.

VII. Для указания привязки предназначены атрибуты left, top, right, bottom – расстояние от левой, верхней, правой и нижней границ соответственно.

Эти атрибуты могут иметь отрицательные значения.

Статистические позиционированные элементы не имеют атрибутов left, top, right, bottom.

VIII. Атрибут z-index устанавливает порядок, в котором свободно позиционированный элементы будет перекрываться друг другом. Элемент с большим значением z-indexперекрывает элемент с меньшим значением. Значение у родителя равно нулю.

IX. Атрибут visibility задает видимость элемента в окне Web-браузера. Он может принимать значения:

1. inherit – если родитель видим, то видим и элемент (значение по умолчанию);
2. visible– элемент отображается независимо от родителя;
3. hidden– элемент скрывается независимо от видимости родителя;
4. Невидимый элемент все равно занимает место на Web-странице.

X.Для того, чтобы скрыть элемент и убрать его с Web-страницы, можно использовать атрибут display со значением none.