mojwp.ru
Назад

Блочная модель верстки HTML/CSS

Опубликовано: 03.04.2013
1
496

блочная версткаПри верстке сайтов или различных правках уже готового кода, необходимо знать что такое блочная модель. Это обязательно для грамотной работы со связкой технологий HTML/CSS.

Часть HTML-элементов, которые можно найти в коде страницы являются блочными изначально. Это относится к тэгам <h1>-<h6>, <p>, <div>, <ol>, <ul>, <li>.

Остальные (например, <span>, <a>) можно сделать, и часто это просто необходимо в соответствии с поставленной задачей, блочными посредством средств CSS (имеется в виду свойство display). То есть работа с веб-страницей, это в основном работа с подобными элементами.

Все блочные элементы имеют одну и ту же структуру, которая представлена на рисунке ниже (немного похоже на хоккейные ворота).

блочная верстка

Каждый блок содержит в себе информационную часть (его содержание, контент). Это может быть изображение, текст или еще что-то. К примеру, для любого элемента <p> (тег абзаца) содержимым будет его текст.

Вокруг контента могут находиться (в том числе и с нулевыми значениями) еще 3 области. Это отступы (padding), граница (border) и поля (margin), которые задаются одноименными свойствами CSS.

Кроме того, они не входят в ширину (width) блока. Это очень важное замечание. Запомните его! Задавая ширину блочного элемента, мы задаем ширину только той его части, где содержится контент (только центрального прямоугольника на рисунке).

Отступы идут сразу вокруг области с контентом, они обеспечивают более привлекательный с точки зрения дизайна вид. Здесь можно провести аналогию  с отступами, которые задаются при печати бумаги на принтере. Если бы они не были установлены, то текст начинался бы с самого края листа. То есть отступы – это то, что находится между контентом и границей.

За отступами идет граница блока. Она имеет настраиваемые в CSS ширину, цвет, оформление.

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

В случае если вы немного запутались, небольшой пример

Допустим, вы хотите, чтобы правая и левая границы блока находились друг от друга на расстоянии 740px, а текст с обеих сторон не прижимался вплотную к границам, а имел промежутки по 20px.

В этом случае надо задать width 700px (не 740px), а левый и правый padding 20px.

700px + 20px + 20px = 740px.

Если border с обеих сторон, например, по 5px, то общая ширина всего блока, от границы до границы 740+5+5 = 750px.

Послесловие

Данная статья написана в рамках "гостевого поста" Михаилом, автором сайта thefamouspeople.ru. Спасибо ему за интересный и полезный материал.

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Юджин Сварог
    Опубликовано: 03.04.2013 Ответить на сообщение

    Помнится было время, когда на собеседовании по соисканию должности программиста MVC я завалил вопросы по CSS, одним из которых было "чем отличается inline от blobk", было весьма прескорбно =) Сейчас это все позади, но уроки по CSS до сих пор считаю полезными не только для дизайнеров, но и для прогеров.
    Спасибо за урок по верстке

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.