2.3 Визуальное форматирование

Основных свойства правил визуального форматирования, которое позволяет нужным образом расположить фрагменты Web-страницы в окне браузера.

position

Определяет способ позиционирования блока на странице. По умолчанию HTML-элементы отображаются браузером последовательно в порядке их расположения в HTML-документе с учетом положения элементов в структуре документа. Значениями свойства position могут быть:

static – блок позиционируется в соответствии с естественным потоком отображения элементов. Это значение задается по умолчанию;

relative – определяет смещение блока относительно его естественного положения в потоке отображения элементов;

absolute – удаляет блок из естественного потока отображения и размещает блок на странице произвольным образом.

В следующем примере используется свойство top для определения положения рисунка (см. описание этого свойства) и обозначение px – единица измерения в пикселях.

Пример:

<img src=”*.gif” style=”position: absolute; top: 30px>

top

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

Пример:

<img src=”*.gif” style=”position: absolute; top: 30px”>

bottom

Задает смещение нижнего края блока относительно нижнего края родительского элемента.

Пример:

<img src=”*.gif” style=”position: absolute; bottom: 30px”>

left

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

Пример:

<img src=”*.gif” style=”position: absolute; left: 30px”>

right

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

Пример:

<img src=”*.gif” style=”position: absolute; right: 30px”>

float

Изменяет положение блока. Значениями свойства могут быть:

left – блок смещается влево, а его содержимое отображается вдоль правой стороны блока;

right – блок перемещается вправо, а его содержимое выводится вдоль левой стороны блока;

none – блок не смещается.

Пример:

p {float: left }

clear

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

left – все плавающие элементы на левой стороне блока будут опущены вниз;

right – все плавающие элементы на правой стороне блока будут опущены вниз;

none – плавающие элементы устанавливаются на всех сторонах блока.

Пример:

h1 {float: left }

width

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

Пример:

p {width: 100px}

height

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

Пример:

p {height: 100px}

min-width

Указывает минимальную ширину блока. По умолчанию значением свойства является 0.

Пример:

p {min-width: 30px}

max-width

Определяет максимальную ширину блока. По умолчанию на максимальную ширину ограничений не накладывается.

Пример:

p {max-width: 150px}

min-height

Указывает минимальную высоту блока. По умолчанию значением свойства является 0.

Пример:

p {min-height: 30px}

max-height

Определяет максимальную высоту блока. По умолчанию на максимальную высоту ограничений не накладывается.

Пример:

p {max-height: 150px}