Проектирование Интернет приложений. Тузовский А.Ф. - 46 стр.

UptoLike

ВУЗ: 

ТПУ | Томск

Составители: 

Рубрика: 

46
ного HTML кода нельзя организовать вывод, например, нескольких ко-
лонок текста. В связи с этим, первоначально для задания взаимного рас-
положения частей web-страницы на экране использовались таблицы
(элементов table), имеющих нулевую толщину границы (т.е. таблицы на
экране не показывается). В ячейках таблица размещаются элементы
HTML страницы.
Однако с помощью каскадных таблиц стилей CSS стало возмож-
ным задавать не только оформление элементов HTML документа, но и
взаимное расположение (позиционирование) отдельных его частей
(блоков). Позиционирование задается с помощью свойства position. Есть
два способа позиционирования блока в нормальном потоке: relative и
static. Способ static используется по умолчанию и выполняет стандарт-
ное форматирование, оставляя блок в нормальном потоке. Способ rela-
tive позволяет сдвинуть положение блока относительно того положения,
которое он занимал бы в нормальном потоке. Например, если задано
position: relative; left: 20px; color: green;
то положение левого края блока сдвигается на 20 пикселей относитель-
но предыдущего элемента в нормальном потоке, в результате чего сам
блок смещается вправо. Если указать отрицательное смещение, то блок
сдвинется влево. Аналогично можно сдвигать блок по вертикали – для
этого используется свойство top.
Кроме этого, имеется другой способ позиционирования – «абсо-
лютное позиционирование», позволяющее точно указать расположение
блока на странице. В этом случае блок изымается из нормального пото-
ка размещения и помещается браузером в заданное место экрана. Ис-
пользовать абсолютное позиционирование достаточно удобно в строгих
сайтах с фиксированным размером страницы. Наиболее типичной явля-
ется ситуация, когда страница разбивается на несколько абсолютно по-
зиционированных блоков, внутри которых используется относительное
позиционирование (а так как вложенные блоки позиционируются отно-
сительно родителя, то структура страницы сохраняется).
Еще одним способом позиционирования является «плавающее по-
зиционирование»: float. Плавающие блоки ведут себя очень похоже на
картинки с указанным тегом align: они прижимаются к указанному краю
контейнера, заставляя "нормальный поток" их обтекать. Такие блоки
довольно удобно использовать для организации так называемой «рези-
новой верстки», когда заданы несколько плавающих блоков, которые
располагаются один за другим по горизонтали (если их суммарная ши-
рина не превышает ширины страницы). Для того, чтобы заставить ото-

Страницы