В отличие от табличного способа расположения данных блочная верстка возможна без четкой привязки каждого логического блока к определенной ячейке. Способ блочной верстки базируется на совершенно иных принципах расположения и взаимодействия. В данном случае каждый логический элемент (текст, картинка, таблица) рассматриваются в виде отдельного блока, и таким же способом размещаются на странице. Такое размещение известно как размещение естественным потоком.
Характерным моментом для блочной верстки является то, что блоки, как правило, должны располагаться по очереди - один за другим и четко разделяться между собой. Расположение в одной строке возможно, но оно используется только в некоторых случаях, когда возникает потребность добиться особого эффекта.
Под понятием блок в общем случае имеют в виду элементарную прямоугольную область. Для указания атрибутов этой области существует ряд качеств, среди которых выделяют рамку, поля (контуры) и отступы. Наполнением блока может служить любая информация – изображение, текстовый фрагмент или что-либо другое.
В общем случае блок представляется следующей структурой:
Он состоит из некоторых основных частей:
Рамка или border. Для этой области возможно определить некоторые качества – цвет, вид, толщина.
Поле (несколько) или padding — используется для размещения информации в блоке, чтобы он правильно располагался в контуре.
Отступы или margin — это размер расстояния между отдельно идущими блоками. С помощью этого элемента можно размещать блоки на заданном расстоянии друг от друга.
Наполнение блока, к примеру, рисунок обязательно находится в рамке, которая может иметь различный вид, вплоть до невидимого. Кроме этого изображение тоже может располагаться в контуре различными способами. Оно может быть придвинуто вплотную или располагаться на определенном расстоянии от него. Рамка, в свою очередь тоже имеет расстояние от следующей рамки. Таким способом можно легко определять размещение блоков на странице и между собой. Параметры размещения определяются цифровыми показателями.
По сравнению с основной массой тэгов div используется не для четкого определения, а для разметки области. Тэг одновременно может включать в себя множество различных блоков с различным содержанием. В качестве функциональной области можно рассматривать заголовок, элементы навигации, элементы основного наполнения и т.п. Как и у множества тэгов у этого есть атрибуты.
Касательно тэга div, то для его представления в основном используют две ветки. В качестве атрибута, придающего единственное значение, использованное только единожды на странице, используется id. Примером может служить footer или header. Этим способом можно задать потом в листе стилей для тэга div с атрибутом id и значением header одни и те же настройки.
Атрибутом, который способен одинаковое значение перенести на множество элементов является class. Это может помочь в том случае, если Вам необходимо каждый абзац «окантовать» рамкой одинаковой толщины или все изображения поместить в рамку определенного цвета.
Пример блочной разметки страницы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
