Блочная модель
Блочная модель (Box Model) - основа CSS
Как известно, любой XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.
Браузер воспринимает и отображает элементы на веб-странице в виде прямоугольных областей, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель).
В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.
Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.
Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
- Собственно, содержимое элемента (контент)
- Бордюр (рамка, англ. "border")
- Пространство между содержимым элемента и бордюром (англ. "padding").
- Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin").
Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные").
Блочные (block) элементы
Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
Inline- ("инлайн"-) элементы
Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.
С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.
