Что такое блочная модель css

Блочная модель CSS. Основы блочной верстки сайта.

В данной статье рассмотрен очень важный момент верстки веб-страниц — box model, или другими словами блочная система верстки сайтов.

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

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

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

Строение блочного элемента

Структура box model не отличается особой сложностью.

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

Для более наглядного представления данного вопроса представлен рисунок ниже:

Общий вид блочного элемента

Величина каждой составляющей регулируется с помощью соответствующего стиля CSS: margin – внешние поля, border – границы непосредственно самого элемента, и padding – величина внутренних полей.

Также стоит отметить, что величина полей и границ может управляться независимо для каждой стороны, что наглядно проиллюстрировано на рисунке снизу:

Блочные отступы

Принципиальные различия между margin и padding

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

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

Еще одна отличительная черта этих элементов основывается на подсчете общей ширины блочного компонента. Стандартно padding входит в эту ширину, а margin – нет. Это обстоятельство зависит от используемой блочной модели документа.

Разновидности блочных моделей

На сегодняшний день существует всего 2 разные модели блочных систем: традиционная, основывающаяся на особенностях работы Internet Explorer 6 и общераспространённая, основанная на основных принципах постулатов W3C. Последняя используется всеми современными браузерами.

Отличительная черта блочных элементов из разных систем

Существует одно единственное отличие между блоками в традиционной и общераспространённой системах. Оно основывается на отличии в правилах подсчета высоты и ширины блока.

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

Однако же более современная блочная система, которая регламентируется постулатами W3C, при присвоении свойств ширины и высоты учитывает только контент. Наглядное отличие продемонстрировано на рисунке ниже:

Отличие блочных моделей CSS

Очень важно помнить об этих отличиях при создании нового веб-ресурса.

Определение реальных размеров элементов

Надеюсь, с традиционным подходом присвоения высоты и ширины блоку все предельно ясно. К примеру, если веб-мастер в файле CSS пишет следующий код:

То это значит, что элемент с классом block будет шириной 200px, с учетом того, что сам контент будет занимать 180 px, а оставшиеся 20px пойдут на внутренний отступ.

Второй случай, который не относиться к традиционному, связан с определенными трудностями. Они возникают из-за того, что свойства ширины и высоты относятся только к контенту, вследствие чего размеры блока не будут совпадать с данными параметрами.

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

Высота блочного элемента CSS

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

Ширина блочного элемента CSS

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

Именно поэтому опытные веб-мастера стараются как можно реже использовать процентное обозначение ширины для блочной верстки по правилам W3C.

Подводя итоги

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

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

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

Блочная модель — это способ отображения элементов браузерами, которые обрабатывают все теги как небольшие прямоугольные блоки. Для браузеров любой тег — это контейнер с содержимым: текстом, изображениями, другими тегами и т.д.

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

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

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

(рамка элемента) — это граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны.

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

(внутренний отступ) — это пустое пространство между содержимым элемента и его рамкой.

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

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

Блочная модель CSS в английском языке называется Box model (box – это коробка). Этот перевод немного помогает понять суть блочной модели. Суть в том, что при формировании страницы на экране используются блоки – прямоугольные области экрана.

Блочная модель CSS – это одна из основ для понимания CSS, модель форматирования документа.

Перед изучением CSS вы должны были изучить HTML, а значит вам должно быть известно что теги HTML делятся на блочные элементы и строчные элементы.

  • – теги создающие блок, то есть они занимают всю доступную ширину (от края до края), высота блочного элемента зависит от его содержимого, блочный элемент всегда занимает новую строку. Примеры блочных элементов — теги <p> и <div> .
  • – теги которые не создают своих блоков, а влияют на отображение содержимого блока. Пример таких тегов — <a> , <em> , <img> и другие.

Давайте на примере рассмотрим отличия этих групп элементов.

Этот пример наглядно показывает что теги <p> и <div> создают свои блоки. Каждый блок начался с новой строки. Для блока <div> была задана ширина и высота, а блок <p> занял всю ширину экрана, его высота равна высоте его содержимого. Чтобы это было видно, для обоих элементов установлен жёлтый фоновый цвет.

Тег <em> просто отформатировал текст внутри блока <p> . Тег <em> – это строчный элемент, он не создал своего блока.

Подробнее про блоки.

Любой блочный элемент имеет установленный набор свойств, которые можно менять при помощи CSS.

Основа блока – его контент или содержание, ширина поля контента задаётся свойством width , а высота свойством height . Но у блока есть и другие поля, они как листья капустны накладываются друг на друга.

Проще показать это в виде рисунка.

Мы видим, что кроме самого поля контента, у блока есть ещё три свойства:

  • Внутренний отступ – padding – по английский "набивка". Набивка – то, что набито, чем заполнена внутренность чего-либо. padding — это часть блока от края контента до границы.
  • Граница – border – по английский и есть "граница". Границу блочного элемента можно установить разными стилями: сплошной линией, точками, пунктиром; можно установить цвет границы. Подробно о том, как управлять свойством border речь пойдёт ниже.
  • Внешний отступ – margin – по английски "маржа". В экономическом значении маржа значит разницу между себестоимостью и ценой.

В рамках этой статьи свойство outline мы рассматривать не будем. Только отмечу: на размер блока это свойство не влияет.

Остальными свойствами можно управлять при помощи CSS устанавливая их размер и некоторые другие стилевые значения. Давайте рассмотрим это на примере.

Результат должен быть такой:

Работа примера №2

Рисунок 2. Работа примера №2.

Мы видим чёрную ( black ) рамку толщиной 3px вокруг блока, созданного тегом <div> . Первый абзац отформатирован по умолчанию, за исключением фонового цвета. Во втором абзаце установлен внутренний отсуп ( padding ) размером 10px , видно что вокруг текста площадь заливки фоновым цветом увеличилась. Третий абзац не имеет внутреннего отступа, но задан внешний отступ margin размером 30px . Мы видим что расстояне между этим и вторым абзацем больше, чем между вторым и первым — это работает внешний отступ.

Границы и отступы не являются обязательными свойствами блока, значения всех их может быть равно нолю.

Как устанавливаются фоновые цвета для этих свойств?

  • Внутренний отступ – padding – всегда имеет цвет фона самого элемента, заданного в свойстве background-color .
  • Граница – border – её цвет задаётся свойством border-color .
  • Внешний отступ – margin – он всегда прозрачен, поэтому цвет этой области совпадает с фоновым цветом элемента родителя (в нашем случае это белый фоновый цвет элемента <body> установленный по умолчанию).

Расширенные возможности управления свойствами блока

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

Рисунок 3. Блочная модель CSS.

Рассмотрим подробнее свойства блоков и приведём примеры их использования.

Внутренний отступ – padding

Внутренний отступ – padding – расстояние от внутреннего края границы до условного прямоугольника, ограничивающего контент блока. Так как внутренний отступ может быть разным у каждой стороны блока, то говорят «верхний внутренний отступ» или «отступ сверху». Стоит отметить что в разных книгах по CSS для свойства padding используются различные переводы, в некоторых он называется просто отступ, в других поле, а отступом называют свойство margin .

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

Результат должен быть такой:

Работа свойства padding

Рисунок 4. Работа примера №3.

Мы видим красиво оформленный блок с внутренними отступами до границы.

Граница – border

Границы – это линии вокруг внутреннего содержимого элемента. Границу можно установить для всех сторон блока, или для любого числа. Для границы можно задать толщину, стиль и цвет. Для создания рамки (границы), как писалось ранее, в CSS существует свойство border . В этом свойстве можно прописать все характеристики рамки (толщину, стиль и цвет). А для создания границ на отдельных сторонах блока нужно воспользоваться свойствами border-top , border-right , border-bottom и border-left .

Результат выполнения кода должен быть такой:

Работа свойства border-left

Рисунок 5. Работа примера №4.

Внешний отступ – margin

Отступ – это пространство от границы блока до его внешнего края. Отступы устанавливаются свойством margin . Как и в случае с внутренними полями и границами, отступы можно задавать для любой стороны блока. Например, свойство margin-left управляет отступом блока с левой стороны.

Особенности внешних отступов.

  • Внешний отступ всегда прозрачен. Он не принимает цвет фона или фоновое изображение установленное для блока, к которому он относится. Однако, он принимает фон родительского элемента.
  • Внешние отступы суммируются. Если между блоками заданы отступы по 25px, то расстояние между ними будет не 50px, а 25px, так как внешние отступы накладываются друг на друга.
  • Для внешнего отступа можно задавать отрицательное значение. Такое значение сдвигает блок, например объявление margin-left : -20px сдвинет блок влево на двадцать пикселей.
  • Отступы можно задавать в процентах, такие отступы вычисляются от размера блока контента. Это будет делаться в отношении как горизонтальных, так и вертикальных отступов.

Рассмотрим этот пример подробней. Результат его выполнения должен быть такой:

Работа свойства margin

Рисунок 6. Работа примера №5.

Для тега <p> тут задана рамка толщиной 1px. Это сделано для того, чтобы было видно где начинается область внешнего отступа этого тега.

Один тег <p> помещён в блок <div> с установленным фоновым цветом. Видно что внешний отступ тега <p> принял фоновый цвет тега <div> . А теги <p> находящиеся вне этого блока, имеют белый цвет внешнего отступа, соответствующий фоновому цвету блока <body> по умолчанию.

Последний, пустой абзац, имеет высоту height : 20px , он помещён в пример только для того, чтобы было лучше видно что расстояние между абзацами составляет 20px и равно высоте этого пустого абзаца. В таблице стилей для тега <p> задано объявление margin : 20px , видно что внешние отступы абзацев сливаются и расстояние между абзацами равно не 40px, а 20px.

Ширина блока

Ширина блока – составная величина, она складывается из суммы значений нескольких свойств:

  • width — ширина содержимого блока;
  • padding-left и padding-right — внутренний отступ слева и справа от содержимого;
  • border-left и border-right — толщина границы слева и справа;
  • margin-left и margin-right — внешний отступ слева и справа.

Значения некоторых свойств могут быть равны нолю, тогда они не влияют на ширину блока.

На рисунке 7 блок обозначен чёрной пунктирной линией.

Ширина блока

Рисунок 7. Ширина блока.

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

Посчитаем ширину блока на примере следующего стиля:

Сложим все слагаемые, составляющие ширину блока:

Ширина блока = 400 + 5*2 + 3*2 + 7*2 = 430px.

Устаревшая блочная модель

Исторически так сложилось, что метод расчёта ширины блока описанный выше использовался не всегда. На данный момент он является стандартом, принятым концерном W3C. Но раньше свойство width не было равно полю контента, а представляло собой постранство блока, которое включает свойство border . Источником такой блочной модели была компания MicroSoft и на её основе работал браузер Internet Explorer до версии 7. На рисунке продемонстрировано сравнение двух блочных моделей.

Рисунок 8. Две блочные модели.

В сети сохранилось огромное количество старых документов, которые создавались в старой блочной модели, которую также называют «режим совместимости». Поэтому списывать её со счетов не стоит.

Важно знать: если в документе на задан <!DOCTYPE> , то браузеры переходят в режим совместимости.

Свойство box-sizing

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

Подробно вникать в суть проблему не будем, это не уровень этой статьи. Тут только отмечу, что устаревшая система иногда оказывается полезной. Для возможности менять алгоритм блочной модели в CSS3 ввели полезное свойство box-sizing . При значении border-box ширина блока начинает включать поля и границы, но не внешние отступы. Таким образом, назначая свойству box-sizing значение border-box , мы можем задавать ширину блока width в процентах и спокойно указывать свойства border и padding нужной нам величины, не боясь, что изменится ширина блока.

Высота блока

При формировании высоты блока используется та же формула, что и при формировании ширины блока. Высота блока – это сумма высоты поля контента, границы, внутреннегот и внешнего отступов (верхних и нижних конечно же). Если значение свойства height не указано, то по умолчанию устанавливается значение auto , в этом случае высота поля контента вычисляется автоматически и зависит от самого контента.

На рисунке 9 показаны все свойства, из которых складывается суммарная высота блока, обозначенного чёрным пунктиром.

Высота блока

Рисунок 9. Высота блока.

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

Давайте сразу передём к примеру и рассмотрим случай, в котором свойствам блока width и height назначены значения 200% .

Блоку также задан фоновый цвет, чтобы была видна его площадь. Вот как он выглядит:

Работа свойства margin

Рисунок 10. Работа примера №6.

Мы видим что по горизонтали образовалась полоса прокрутки, размер которой в два раза превышает размер окна браузера, т.е. блок по ширине всегда равен 200% от родительского элемента – окна браузера. Но во вертикали такого эффекта нет. Использование процентов для указания высоты не имеет смысла, так как высота высота родителя по умолчанию не существует и её надо указывать.

Тут родительскому элементу для <div> — тегу <body> , установлена высота величиной 50px, и высота для <div> установлена 100%. То есть этот тег имеет высоту 50px.

Работа свойства margin

Рисунок 11. Работа примера №7.

Видно, что площадь окрашенная в цвет #F3F3D6 увеличилась. Если окно браузера ещё уменьшить по высоте, то появится вертикальная полоса прокрутки, чего в прошлом примере не было.

Но как сделать так, чтобы задать блоку параметр height в процентах и это работало. Попробуйте изменить прошлый пример и для селектора body установить свойство height равное 100% . Такой пример работат не будет. Почему? Потому что для тега <body> высота определяется относительно его родителя — тега <html> , а там высота не задана. Значит 100% от ничего равно ничего. Чтобы решить эту проблему нужно написать такой стиль:

Только установив высоту в 100% для тегов <html> и <body> мы сможем установить высоту в процентах для тега <div> и она будет работать.

Работа свойства height

Рисунок 12. Работа примера №8.

При работе с высотой блока следует помнить о ещё одной особенности, если контент превышает размер блока, то он выходит за его рамки. Вот пример такого кода:

На примере видно, что текст вышел за границы блока.

Работа свойства height

Рисунок 13. Работа примера №9.

Избежать подобного очень просто – достаточно не задавать высоту контента ( height ). Впрочем, иногда нужно строго определить высоту блока. В этом случае можно использовать свойство overflow со значением auto . Это свойство будет в блоке создавать полосу прокрутки в случае, если размер контента привысит размер блока.

Добавим в стиль примера №9 свойство overflow со значением auto и результат будет таким:

Работа свойства overflow

Рисунок 14. Свойство overflow со значением auto.

У свойства overflow есть другое значение, которым также можно регулировать высоту блока — hidden (англ. скрытый). Это значение просто скрывает всё, что не влазит в установленные размеры блока.

Работа свойства hidden

Рисунок 14. Свойство overflow со значением hidden.

Минимальная и максимальная ширина элемента

В этой статье также уместно вспомнить свойства min-width и max-width устанавливающие минимальную и максимальную ширину элемента соответственно.

Свойство min-width работает так: если пользователь меняет размеры окна браузера, то ширина блока не становиться меньше минимальной, а в таком случае появляется полоса прокрутки. Значение ширины элемента будет зависеть от значений свойств width , max-width и min-width .

В таблице приведены правила расчёта браузерами ширины блока при использовании этих свойств.

Табл. 1. Ширина элемента
Значения свойств Ширина
min-width < width < max-width width
min-width > width > max-width min-width
min-width > width < max-width min-width
min-width < width width
min-width > width min-width
min-width > max-width min-width
min-width < max-width max-width

Таблицу следует читать так: если значение width меньше значения min-width , то ширина элемента принимается равной min-width .

Свойство max-width – устанавливает максимальную ширину элемента.

Пример использования свойства min-width совместно со свойством width :

Пояснение к примеру: на ноутбуке (важна ширина экрана) блок будет иметь ширину 70%. Но если уменьшать ширину вкладки, то блок примет значение ширины 500px.

Тут срабатывают два правила из таблицы выше, а именно:

  • Четвёртая строка: min-width width = width .
  • Пятая строка: min-width > width = min-width .

Свойство max-width мы не используем, поэтому работают эти две строки таблицы.

Когда вкладка раскрыта на всю шрину экрана, пусть ширина экрана равна 1000px (для простоты расчётов), то значение 70% свойства min-width будет 700px, т.е. выполняется условие min-width > width , и ширина блока равна значению свойства min-width . Это работает правило из пятой строки таблицы.

Когда вкладку сужать до определённого предела, т.е. уменьшать её ширину, то относительное значение свойства min-width станет меньше 500px, т.е. меньше значения свойства width . В этом случае сработает правило из четвёртой строки и ширина блока зафиксируется равной 500px.

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

Минимальная и максимальная высота элемента

Аналогично есть свойства для назначения минимальной и максимальной высоты элемента: min-height и max-height .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *