Знание блоковой модели CSS позволяет нам верстать сайты без использования HTML-таблиц.
В языке HTML можно создавать различные блоки: заголовки, абзацы, таблицы
и пр. Мы уже знаем, что каждый элемент HTML отображается в виде
структурного или строчного блока. Однако в HTML нет возможности
позиционировать (точно размещать) созданные блоки на странице.
Все они располагаются друг за другом в той последовательности, в которой
указаны в коде страницы. Пожалуй, единственным исключением являются
рисунки, для которых в элементе IMG можно указать выравнивание по правому или левому краю, например: <IMG src="picture.gif" align="right"<
В этом случае изображение как бы "вырывается" из обычного потока
элементов и выравнивается по правому краю страницы, а текст и другие
элементы обтекают его слева.
В CSS имеется обширный инструментарий, позволяющий не только
создавать блоки на основе любых элементов HTML, но и точно
позиционировать их на экране. При этом таблицами пользоваться не нужно,
код страницы становится более логичным, понятным и легко читаемым.
Естественно, что и размер кода при использовании CSS в большинстве случаев становится меньше.
Таким образом, формирование страницы при помощи средств CSS сводится к следующему:
- создается блок и задаются его параметры;
- вновь созданный блок размещается (позиционируется) на странице.
В предыдущих разделах мы уже рассматривали структуру блока в CSS.
Итак, каждый блок имеет контентную часть, в которой располагается
содержимое блока: текст, рисунки, таблицы, т.е. любые требуемые
элементы. Естественно, внутри блока могут располагаться и другие блоки,
тогда они называются вложенными в первый, а сам этот первый блок будет
являться контейнером для вложенных в него блоков.
|
Контейнер есть у любого блока - им является элемент блокового
уровня, непосредственный предок данного элемента в дереве элементов
документа. Для некоторых элементов контейнером служит непосредственно
окно браузера.
|
Контентная часть блока может быть окружена отступами, рамками и
полями. Для них могут быть установлены некоторые значения или они могут
быть нулевыми. Блок имеет некоторую фиксированную ширину (width) и высоту (height).
Общая ширина контейнера блока складывается из собственно ширины блока,
ширины левых и правых полей, толщины левой и правой границ, а также
левого и правого отступов.
Все параметры полей, границ и отступов можно
задать при помощи соответствующих свойств. Подробно мы их уже
рассматривали ранее. Ширина контентной части блока задается при помощи
свойства width, высота - при помощи свойства height. Как
вы помните, поля, границы и отступы по умолчанию имеют нулевое значение,
поэтому изначально ширина блока совпадает с шириной контейнера.
Если для некоторого блока не заданы явным образом ширина и высота, то
они будут равны ширине контейнера этого блока. Так, если внутрь
элемента BODY поместить любые другие элементы, например абзац, то ширина этого блока будет равна ширине контейнера BODY, т.е. ширине самого окна браузера. Приведем пример:
|
<BODY><Р>Убедимся, что ширина данного блока будет совпадать с шириной окна браузера.</Р></BODY>
|
В браузере этот код будет отображаться во всю ширину монитора. Можно принудительно ограничить ширину блока, например, записав CSS-правило следующего вида:
Теперь этот блок будет занимать по ширине только половину окна браузера,
поскольку ширина блока здесь явно указана равной 50%, а проценты в
данном случае вычисляются относительно ширины контейнера.
|
Убедимся, что ширина данного блока будет 50% с шириной окна браузера.
|
Положение вложенного блока всегда определяется относительно области
контента контейнера, не затрагивая отступы, границы и поля блока.
Рассмотрим пример блока, который будет служить контейнером для
некоторого другого, и зададим для него следующие параметры:
#main_block {
color:red;
background:#FFFFCC;
border:1px solid #660033;
margin:2em;
padding:1em;
width: 200px
}
<DIV ID="main_block">Содержимое главного блока #main_block</DIV>
|
Текст внутри этого блока красный, отступы внутри блока равны 1em, сам
блок имеет светло-желтый фон и обрамлен темно-коричневой сплошной
границей толщиной в 1 пиксель. Ширина блока 200 пикселей, поля для блока
(т.е. отступы от краев контейнера - а в нашем случае контейнером служит
окно браузера) равны 2em. В браузере этот код мы увидим так, как
показано на рисунке:
|
Содержание главного блока #main_block
|
| 