3.14. Введение в блоковую модель

Любой элемент на Web-странице (или группу элементов) можно представить как отдельный прямоугольный блок. Можно задать: цвет фона

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

Блоки элементов состоят из четырех основных компонентов. В основе блока лежит его содержание. Содержание окружает определенный интервал, после чего идет граница, окруженная полями, как показано на рисунке.

• Интервалы, границы и поля не являются обязательными. Область интервала (padding) – это пространство между краем области содержания и границей (если она есть). Фоновый цвет или изображение, применяемые к элементу, доходят до этой области. Границы (borders) создаются стилевыми свойствами, которые определяют их вид (сплошной или пунктирный), толщину и цвет. Если в границе есть пустое пространство (щель), в этом пространстве отображается фон. Иными словами, фон распространяется под границей до ее наружного края.

• Поля (margins) всегда прозрачны, а это значит, что сквозь них будет виден фоновый цвет или изображение родительского элемента.

• Шириной элемента называется только ширина области содержания. Это означает, что если вы укажете, что элемент должен быть шириной 200 пикселей, то содержимое будет шириной 200 пикселей, а общая ширина будет складываться из ширины интервала, границы и полей, добавленных к этому значению.

• Стиль для верхней, правой, нижней и левой сторон блока может задаваться независимо.

Чтобы определить границу блока, необходимо указать ее стиль: стиль границы задается свойством: border – style: значения:

none – нет границы

solid – сплошная прямая линия

double – двойная линия

groove – вдавленная линия

ridge – выпуклая трехмерная линия

inset – трехмерная ступенька вниз (текст вдавлен)

outset – содержимое приподнято над страницей

dotted – пунктирная линия

dashed – штриховая линия

Блок можно задать следующим образом:

- в области заголовка: <style>#d1_{свойства: значения; свойство: значение}</style>

- в тексте: <div_id=d1> текст </div>

Cвойства блока:

border – color: цвет – цвет границы

border – width: число – толщина границы

padding: расстояние между текстом и границей

margin: расстояние между границей и внешним элементом

Границы нумеруются top, bottom, left, right.

Пример: border: red blue green black;

или border - top - color: red; …

Спецификации CSS не сводятся лишь к «украшательству» элементов, образующих документ. Их также можно использовать для задания базовой структуры страницы. Познакомимся с двумя принятыми в CSS методами упорядочения элементов: свободным размещением (float-ing) и позиционированием (positioning).

Перечислим свойства, управляющие положением элементов в CSS2.1:

float bottom overflow

clear top clip

position left visibility

bottom right z-index

3.15. Нормальный поток

В модели «нормальный поток» (normal flow) текстовые элементы страницы располагаются сверху вниз и слева направо для языков, в которых читают слева.

Входя в нормальный поток, блочные элементы располагаются друг за другом, а встроенные – заполняют доступное для них место. При изменении окна браузера блочный элемент расширяется или сужается, а содержимое элемента форматируется с учетом изменившейся ширины. В этой модели объект влияет на положение соседних, окружающих элементов.