Как в css делать блоки

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

Браузеры рисуют любой элемент на HTML-странице как прямоугольник. Как рассчитывается размер этого прямоугольника? Разберёмся с одной из основных концепций вёрстки.

Время чтения: меньше 5 мин

Обновлено 20 декабря 2021

«Всё — прямоугольник»

Скопировать ссылку ««Всё — прямоугольник»» Скопировано

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

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

Скопировать ссылку «Блочная модель» Скопировано

Блочная модель, она же box model — это алгоритм расчёта размеров каждого отдельного элемента на странице, которым браузеры пользуются при отрисовке. Чтобы точно понимать, каким в итоге получится блок и сколько места он займёт, держите в голове следующую картинку:

Ровно такую же схему, но в других цветах можно увидеть в инструментах разработчика любого из браузеров. Например, так выглядит блочная модель элемента в Chrome:

Блочная модель состоит из нескольких CSS-свойств, влияющих на размеры элемента:

• width — ширина элемента;
• height — высота элемента;
• padding — внутренние отступы от контента до краёв элемента;
• border — рамка, идущая по краю элемента;
• margin — внешние отступы вокруг элемента.

Ширина и высота

Скопировать ссылку «Ширина и высота» Скопировано

При помощи свойств width и height можно задавать размеры контентной области блока.

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

   Вместе весело шагать по просторам!  div> Вместе весело шагать по просторам! div>    Скопировать Скопировано Не удалось скопировать   

По умолчанию элементы с блочным отображением ( display : block ) занимают всю ширину родителя, если явно не задано другое. А вот высота элемента подстраивается под контент.

Элементы со строчным ( display : inline ) или строчно-блочным ( display : inline — block ) отображениями по умолчанию подстраивают и ширину, и высоту под вложенный контент. Однако строчно-блочному можно и произвольно задать размеры: ширину ( width ) и высоту ( height ).

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

 div  width: 200px; height: 200px;> div  width: 200px; height: 200px; >    Скопировать Скопировано Не удалось скопировать   

Теперь элемент будет размером 200 на 200 пикселей.

padding

Скопировать ссылку «padding» Скопировано

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

Добавим к стилям из примера выше внутренние отступы:

 div  width: 200px; height: 200px; padding: 25px 15px;> div  width: 200px; height: 200px; padding: 25px 15px; >    Скопировать Скопировано Не удалось скопировать   

Теперь ширина блока будет равна 200 + 15 + 15 = 230 пикселей. А высота будет равна 200 + 25 + 25 = 250 пикселей. Внутренние отступы прибавились к ширине и высоте.

border

Скопировать ссылку «border» Скопировано

При определении размеров элемента в расчёт берутся и рамки, за которые отвечает свойство border .

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

 div  width: 200px; height: 200px; padding: 25px 15px; border: 5px solid hotpink;> div  width: 200px; height: 200px; padding: 25px 15px; border: 5px solid hotpink; >    Скопировать Скопировано Не удалось скопировать   

Теперь конечные размеры элемента будут:

margin

Скопировать ссылку «margin» Скопировано

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

Если элементу из нашего примера мы зададим внешние отступы, то он будет занимать больше места, двигая при этом своих соседей:

 div  width: 200px; height: 200px; margin: 50px; padding: 25px 15px; border: 5px solid hotpink;> div  width: 200px; height: 200px; margin: 50px; padding: 25px 15px; border: 5px solid hotpink; >    Скопировать Скопировано Не удалось скопировать   

box — sizing

Скопировать ссылку «box-sizing» Скопировано

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

Мы можем поменять стандартное поведение и указать браузеру, что ширина и высота, заданные в CSS, должны включать в себя в том числе внутренние отступы и рамки. Делается это при помощи свойства box — sizing .

Источник

Свойства блочной модели CSS. Объяснение с примерами

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

Оглавление

Зачем изучать блочную модель CSS?

Блочная модель CSS состоит из свойств: box-sizing, padding и margin. Если их не использовать, то получим что-то похожее ​

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

Выглядит гораздо более привлекательно, не так ли? Если вы хотите создать свой сайт с точными расчетами, как тот, что указан выше​, то вы попали по адресу. Изучение блочной модели CSS — один из многих способов, которые помогут вам сделать веб-сайты, идеальные до пикселя.

В этой статье мы поговорим о том, как использовать эти свойства:

Как использовать свойства блочной модели CSS

Давайте посмотрим на несколько примеров, где мы можем использовать свойства блочной модели CSS. Мы собираемся проанализировать сайт, показанный выше. ​

Давайте внимательнее посмотрим на навигационную панель (navbar). Вы можете заметить разницу между примером, в котором используется свойство padding, и примером, в котором его нет:

Теперь давайте подробнее рассмотрим раздел содержимого вместе с кнопками. Опять же, вы заметите разницу — на правой картинке также используется свойство padding.

Структура блочной модели CSS

Говоря о блочной модели, стоит воспринимать её как луковицу. И эта «луковица» имеет 4 слоя:

1 слой блочной модели: Content

В HTML все ведет себя как ящик с контентом. Давайте вставим контент с изображением котенка. ​

2 слой блочной модели: Padding

Следующий слой блочной модели CSS — это слой заполнения. Он обертывает наш контент следующим образом ​

3 слой блочной модели: Border

Следующий слой блочной модели CSS — это пограничный слой. Он обертывает наш контент + отступы следующим образом ​

4 слой блочной модели: Margin

Следующим и последним слоем блочной модели CSS является слой полей. Он обертывает наш контент + отступ + границу следующим образом ​

Итак, давайте посмотрим, как эти свойства работают в проекте.

Как настроить проект

Это руководство подходит для всех, в том числе для новичков. Если вы хотите писать код, выполните следующие действия.

HTML

Откройте VS Code или Codepen.io и напишите этот код ​ внутри тега body:

CSS

Очистите стили нашего браузера по умолчанию ​

Теперь давайте стилизуем наш блок ​

Все готово, приступим к программированию! ​

Свойство Padding

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

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

Вот вам еще один пример — посмотрите на содержимое ниже с двумя кнопками​

Как использовать свойство padding в CSS

Ниже представлены названия четырех свойств заполнения:

• padding-top
• padding-right
• padding-bottom
• padding-left

И помните, что отступы — это пространство, которое вы добавляете поверх основного контента:

Давайте добавим отступы к нашему контенту. Область красного цвета — это отступ ​

Чтобы воссоздать результаты, указанные выше, ​ напишите этот код в свой CSS: ​

// Padding added on top, right, left, bottom of .box-1 .box-1

Откроем консоль разработчика и перейдем в вычисляемый раздел:

В самом центре — контент, который 300px в ширину. Посмотрите, вокруг контента мы добавили отступы по 100 пикселей.

Давайте попробуем добавить отступ только к одной стороне нашего контента (только с правой стороны):

Чтобы воссоздать результаты, указанные выше, ​ напишите этот код в свой CSS: ​

.box-1 < padding: 0 100px 0 0; >// Or you can use ​ .box-1

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

Посмотрите — отступ в 100 пикселей был добавлен только с правой стороны нашего контента, как мы указали.

Свойство Border

Обычно вы будете использовать свойство border при создании кнопок. Вот демонстрация GIF ​

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

Как использовать свойство границы в CSS

И помните, граница — это пространство, добавленное поверх нашего контента + отступа: ​

Есть три важных параметра свойства границы:

• border size
• border style: solid (сплошная линия) / dotted («точечная» линия) / dashed (пунктир)
• border color

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

Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS: ​

Откроем консоль и посмотрим расчеты блочной модели:

Теперь посмотрите на изображение выше​ — вокруг нашего контента + отступа добавлена ​​граница 10 пикселей.

Свойство Margin

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

Обратите внимание, что я добавил поля к левому и правому краям веб-сайта выше ​

Вот еще один пример использования свойства margin: ​

Как использовать свойство margin в CSS

Margin имеет всего четыре свойства поля:

• margin-top
• margin-right
• margin-bottom
• margin-left

И помните, margin — это пространство, добавленное поверх нашего контента + отступы (по padding) + границы:

Давайте добавим отступ к нашему контенту. Весь наш набор смещается из-за margin, как в этом GIF: ​

Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS: ​

Можем еще раз проверить расчеты: ​

Посмотрите, вокруг нашего контента + отступов + границы было добавлено поле 50 пикселей .

Давайте попробуем добавить поле только к одной стороне нашего контента (только левой стороне):

Чтобы воссоздать результаты выше, напишите этот код в своем CSS ​

На консоли мы видим, что поле в 50 пикселей применено только к левой стороне ​

Свойство box-sizing

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

Примечание:

Мы не будем обсуждать padding-box, поскольку его поддерживает только Firefox, и он используется не очень часто.

В чем разница между content-box и border-box в CSS?

И border-box, и content-box работают одинаково. Посмотрите на эти изображения: ​

Итак, в чем здесь главное отличие? Разница заметна, когда мы добавляем поля, границу или отступы к нашим блокам.

Когда мы используем box-sizing: content-box, который является значением по умолчанию, он добавит поля, отступы и границы за пределами поля, например: ​

Вы также можете увидеть расчеты здесь: ​

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

Но когда мы используем свойство box-sizing: border-box, оно добавит поля, отступы и границы вовнутрь блока, например: ​

В box-sizing: border-box абсолютно точные расчеты HTML — элементов, а это значит, что такой способ является идеальным для создания адаптивных веб-сайтов.

Вы также можете поэкспериментировать со значениями — просто используйте этот код: ​

Заключение

Вот собственно и всё. Для желающих оставлю ссылку на видео-инструкцию к данному уроку от автора (Джоя Шахеба):

Источник