Реальный пиарHTMLУроки HTML → Блочная модель (Box Model) - основа CSS

Блочная модель (Box Model) - основа CSS

браузер это

Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.

Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель).

Предположим, мы имеем на входе:
<span>Какой-то контент</span>

В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.

Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.

Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
Собственно, содержимое элемента (контент)
Бордюр (рамка, англ. "border")
Пространство между содержимым элемента и бордюром (англ. "padding").
Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin").

Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные").
Блочные (block) элементы
Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
Inline- ("инлайн"-) элементы
Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.

Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.

С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.


Источник: http://css.manual.ru

Рекомендуем



Свойство white-space: теги PRE и NOBR в одном флаконе Когда мы хотим сохранить элементарное форматирование текста, мы используем тег pre, который сохраняет пробелы и переводы строк


Как вставить видео на сайт Но выход из этого положения есть: исползовать сторонный сервис хранения файлов, например, Amazon S3, о котором я расскажу в одной из следующих статей, так что не переключайтесь


Несколько слов об отладке CSS Также настоятельно рекомендую установить в Firefox расширение Web Developer - замечательную многофункциональную панель