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

Блочная модель CSS – это достаточно простая тема, но изза наличия множества несогласованностей в ее реализациях, существующих в Сети, работа с ней быстро превращается в кошмар. Этот короткий раздел лишь немного затрагивает вопросы работы с блочной моделью, поэтому, если вы действительно хотите получить полное представление о сути всего этого, обращайтесь к более авторитетным источникам, таким как книга Эрика Мейера (Eric Meyer) «CSS: The Definitive Guide» (O’Reilly).

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

Чтобы свести воедино понятия содержимого, полей, отступов и рамки, рассмотрим следующую выдержку из спецификации: Поле, рамка и отступ могут быть разбиты на левые, правые, верхние и нижние сегменты (например, на диаграмме «ЛП» относится к левому полю, «ПО» – к правому отступу, «ВР» – к верхней рамке, и т. д.). Периметр каждой из четырех областей (содержание, от ступ, рамка и поле) называются «границей» («edge»), то есть каждый блок имеет четыре границы:
1 – граница содержимого или внутренняя граница
Граница содержимого окружает отображаемое содержимое элемента.
2 – граница отступа
Граница отступа задает отступ от блока.


Если отступ имеет ширину 0, то граница отступа совпадает с границей содержимого. Граница отступа от блока определяет границы объемлющего прямоугольника для этого блока.
3 – граница рамки
Граница рамки окружает рамку блока. Если рамка имеет ширину 0, то граница рамки совпадает с границей отступа.
4 – граница поля или внешняя граница
Граница поля окружает поля блока. Если поле имеет ширину 0, то граница поля совпадает с границей рамки.

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

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


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

Инструментальный набор пытается нормализовать различия в вычислениях различных аспектов блочной модели, для чего предоставляет ся атрибут dojo.boxModel, который может принимать значение "content-box" или "margin-box", и функция dojo.contentBox, которая может использоваться для получения координат блоков. По умолчанию атрибут dojo.boxModel имеет значение "content-box". Во всех случаях параметbox в сигнатурах функций, представленных в табл. 2.5, является ссылкой на объект, содержащий значения ширины и высоты, а также координаты верхнего левого угла прямоугольной области. Например, для узла, верхний левый угол которого отстоит на 50px правее и на 200px ниже начала координат родительского элемента, при ширине прямоугольника с полями 300px и высоте 150px параметр box, описывающий блок, мог бы выглядеть так: { l: 50, t: 200, w: 300: h: 150 }.

Чтобы поэкспериментировать самостоятельно, скопируйте следующий фрагмент в локальный файл и откройте его в броузере Firefox:
(body style="margin:3px")

(/body)

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


2.3 показано, как эта страница выглядит в окне броузера:
console.log("box model", dojo.boxModel); // content-box
console.log("content box", dojo.contentBox("foo")); // l=0 t=0 w=4 h=4
console.log("margin box", dojo.marginBox("foo")); // l=3 t=3 w=6 h=6

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
Аргументы «функции в виде строк»
Грубое определение типа
Добавление узлов
Зачем управлять беспорядком
Изменение стилей узлов

Вернуться в раздел: Dojo / Утилиты броузера