Руководство для начинающих по блочной модели CSS

В этом руководстве мы расскажем обо всем, что вам нужно знать о блочной модели CSS, включая:

• Что такое блочная модель CSS
• Свойства блочной модели
  • Контент/Content
  • Отступ/Padding
  • Граница/Border
  • Поле/Margin
• Размеры блока
• Свойство display
• block vs inline
• Высота и ширина
• Примеры дизайна блочной модели

К концу статьи вы будете хорошо понимать, что такое блочная модель и как использовать её возможности для создания сложных и отзывчивых макетов веб-страниц. Давайте приступим!

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

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

• Контент/Content: Содержимое внутри элемента, например текст, изображение и т. д.
• Отступ/Padding: Прозрачное пространство вокруг содержимого.
• Граница/Border: Область, окружающая отступы (если они есть) и контент.
• Поле/Margin: Прозрачное пространство вокруг границы.

Вот диаграмма блочной модели:

Понимание этих компонентов позволяет точно управлять интервалами, позиционированием и выравниванием HTML-элементов на странице.

Теперь давайте рассмотрим каждый компонент более подробно.

Свойства блочной модели

Контент/Content

Внутренняя часть поля, заполненная содержимым, таким как текст, изображения и т. д. Это область внутри padding, border и margin.

Чтобы задать высоту и ширину области контента, используйте свойства height и width. Например:

.box {
  height: 300px;
  width: 300px;
}

Отступ/Padding

Прозрачная область, окружающая контент. Отступ создаёт пространство между контентом и границей (border).

С помощью свойства padding можно задать отступы по всем четырём сторонам элемента. Например, чтобы добавить 50px отступа со всех сторон:

.box {
  padding: 50px;
}

Вы также можете выбрать определённую сторону, например, padding-top, padding-right, padding-bottom и padding-left. Или используя логические свойства padding — padding-block являющееся сокращением для CSS свойств padding-block-start и padding-block-end, и padding-inline являющееся сокращением для CSS свойств padding-inline-start и padding-inline-end.

Отступ увеличивает общую ширину и высоту блока. Если вы задали ширину и высоту, то отступы будут добавлены к этим размерам.

Граница/Border

Граница окружает отступ и контент. Она определяет край элемента.

Границы имеют свойства border-width, border-style (solid, dotted и т.д.) и border-color.

Например:

.box {
  border: 5px solid blue;
}

Это создаст сплошную синюю границу шириной 5px вокруг контента и подложки.

Границы также увеличивают общую ширину и высоту элемента.

Поле/Margin

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

Поле очищает область вокруг границы. Мы можем выделить определённую сторону, как и в случае с padding, используя margin-top, margin-right, margin-bottom и margin-left. Или используя логические свойства margin — margin-block являющееся сокращением для CSS свойств margin-block-start и margin-block-end, и margin-inline являющееся сокращением для CSS свойств margin-inline-start и margin-inline-end.

Или установите поля сразу со всех сторон:

.box {
  margin: 20px;
}

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

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

Размеры блока

По умолчанию в CSS ширина и высота, заданные для элемента, применяются только к области контента.

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

Это означает, что если вы зададите ширину 300px, то общая ширина блока будет равна:

300px контент + 25px отступ слева + 25px отступ справа + 2px граница слева + 2px граница справа = 354px общая ширина.

Этот установленный по умолчанию box-sizing называется content-box.

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

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

Это значительно упрощает управление размерами.

Поэтому в большинстве случаев вы захотите установить:

*, *::before, *::after {
  box-sizing: border-box;
}

Это задаёт размер border-box для всех элементов и псевдоэлементов.

Свойство display

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

Два наиболее распространённых значения:

• block. Отображает элемент в виде блока, который прерывает поток и располагается вертикально. Ширина по умолчанию равна 100% родительского элемента.
• inline. Отображает элемент в строке с текстом, без переносов строк до или после. Ширина по умолчанию соответствует размеру содержимого.

Чаще всего вы используете display: block для div и display: inline для span.

Но display также позволяет использовать более сложные макеты, такие как flexbox и grid. Об этих более сложных техниках мы поговорим позже.

block vs inline

Поскольку свойство display важно, давайте подробнее рассмотрим, как ведут себя block и inline блоки.

block

• Разрывают поток и располагаются вертикально
• По умолчанию 100% ширины родителя
• Можно задать ширину и высоту
• Учитывают padding, border и margin со всех сторон

Список элементов, являющихся блочными по умолчанию..

Inline

• Горизонтальное распределение содержимого
• Учитывают только левые и правые padding и margin
• Невозможно задать ширину и высоту
• padding и margin не влияют на вертикальный отступ

К инлайн элементам относятся элементы не разрывающие поток, такие как <span>, <abbr>, <kbd>, <em>, <strong> и т.д.

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

Высота и ширина

Свойства width и height управляют размером области контента. Ширина и высота могут быть заданы различными способами:

Пиксели

width: 500px;

Пиксели обеспечивают точный контроль. Но пиксельные размеры не реагируют на изменение размера страницы.

Проценты

width: 50%;

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

auto

width: auto;

auto устанавливает ширину автоматически в зависимости от размера содержимого. Это значение по умолчанию для блочных элементов.

max-width / min-width

max-width: 500px;
min-width: 250px;

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

vh / vw

width: 50vw;
height: 50vh;

Единицы области просмотра масштабируются по размеру области просмотра (размер окна браузера). vw — процент от ширины области просмотра. vh — процент от высоты области просмотра.

Это позволяет использовать полностью отзывчивые относительно области просмотра блоки.

Теперь, когда мы рассмотрели основные понятия, давайте посмотрим несколько примеров блочной модели в действии!

Примеры дизайна блочной модели

Имея представление о компонентах блочной модели, вы можете точно расположить и выровнять элементы.

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

Двухколоночный макет

Простой двухколоночный макет с левым сайдбаром и правой областью контента:

.container {
  display: flex;
}
.sidebar {
  flex: 1;
  margin-right: 20px;
}
.content {
  flex: 2;
}

Используя flex-box, вы разделите контейнер в соотношении 1 к 2, сайдбар и колонка контента. Поля разделяют элементы.

Отзывчивый центрированный блок

Для выравнивания блока по горизонтали и отзывчивости:

.center-box {
  margin: 0 auto;
  max-width: 500px;
}

Автоматические левое и правое поля центрируют блок. max-width обеспечивает отзывчивость бокса.

Фиксированный сайдбар, гибкий контент

Для создания сайдбара с фиксированной шириной и расширяемой областью контента:

.container {
  display: flex;
}
.sidebar {
  width: 200px;
}
.content {
  flex: 1;
  min-width: 500px;
}

Ширина сайдбара фиксирована и составляет 200px. Контент заполняет оставшееся пространство с min-width: 500px.

Макет карточки

Макет карточек с равными полями:

.card {
  display: inline-block;
  width: 300px;
  margin: 20px;
  border: 1px solid #eee;
}

display: inline-block позволяет отображать карточки горизонтально. Ширина и поля управляют интервалом и размерами.

Вертикальное центрирование

Для вертикального центрирования текста или элементов:

.center {
  height: 100vh;
  display: flex;
  align-items: center;
}

Высота 100vh растягивает блок во весь экран. flex-box выравнивает элементы по вертикали с помощью align-items.

Можно привести ещё множество примеров, но эти должны подтолкнуть вас к идеям по созданию макетов и дизайнов с использованием свойств блочной модели CSS!

Заключение

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

Основные выводы:

• Блочная модель включает в себя контент, отступы, границы и поля.
• Используйте box-sizing: border-box для более удобного определения размера.
• display контролирует поведение block vs inline
• Ширина, высота, отступы, поля и границы могут быть заданы отдельно
• max/min width/height помогают создавать отзывчивые блоки

Для дальнейшего изучения изучите шаблоны отзывчивого дизайна и продвинутые методы вёрстки, такие как CSS flex-box и grid.

Блочная модель является — основа освоения CSS. С её помощью вы сможете оживить дизайн и макеты в Интернете!