Рубрика CSS

Блочная модель в CSS

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

Для начала рассмотрим как рассчитывается размер элемента. Вот схема:

Если вы пользуетесь плагином Firebug, то с помощью диаграммы (макета) можно просмотреть любую область страницы со значениями отступов:

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

Размер самого блока рассчитывается следующим образом:

Что делать, если значения не установлены?

Если значения внутренних отступов и границ не установлены, то они примут нулевые значения (в случае если вы используете CSS сброс), в ином случае будут равны значениям по умолчанию используемого браузера (которые обычно не сбрасываются).

Если ширина блока не указанна (а элемент является блочным), то все становиться немного проще. Давайте начнем с этого, а затем перейдем к некоторым другим вопросам, касающихся блочной модели.

Дефолтная ширина для блочных элементов (ширина по умолчанию)

Если Вы не указываете ширину блочного элемента, а блок при этом имеет статическое (static) или относительное позиционирование (relative), то ширина останется 100% , а внутренние отступы и границы будут располагаться внутри.

Но если вы явно укажите ширину блока равной 100%, внутренние отступы будет выталкивать внешнее поле наружу.

Весь фокус заключается в том что, в действительности ширина блока по умолчанию не является 100%, а лишь занимает остающееся свободное пространство. Это особенно полезно знать, так как существует множество случаев, когда необходимо установить ширину, либо не устанавливать её.

Большие затруднения возникают при использовании элемента textarea, для придания ширины которого необходимо указывать «COLS» атрибут.

Таким образом, у нас нет возможности сделать его ширину равной 100%. В статической вёрстке все намного проще, ширину можно подогнать с помощью пикселей, в случае же с резиновым макетом такой возможности нет.

Блоки с абсолютным позиционированием без указания ширины

Абсолютно позиционируемые блоки, которые не имеют ширину, ведут себя немного странно. Их ширина соответствует ширине содержимого в них контента. Смотрите рисунок ниже:

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

Обтекаемые блоки без указания ширины (float)

То же самое поведение замечено с обтекаемыми элементами без указания значений ширины. Блок принимает ширину содержимого контента и ограничен шириной родительского элемента (хотя относительное позиционирование уже необязательно). Из-за хрупкой природы данных элементов, не следует их использовать как в критически важных сценариях, так и в общей верстке страницы.

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

Строчные элементы тоже прямоугольники

Мы были сосредоточены на блочных элементах, однако строчные элементы тоже являются прямоугольниками. Они представляют собой длинные и тощие прямоугольники, выводимые в N-ое количество строк. Они тоже могут иметь внешние и внутренние отступы и границы, как и любой другой элемент на странице.

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

Увидеть все собственными глазами

Хотите увидеть в отдельности каждый «блок» формирующий вашу страницу? Допишите в ваш файл стилей следующий код: