ИТиВП. Часть 1 (ДН) Хаджинова: Альтернативная блочная (box model) модель. Свойство box-sizing

Альтернативная модель

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

Пример HTML

Пример - CSS

В результате параметры заголовка будут включать в себя внутренние отступы и границы, но не внешние отступы. Их включение в CSS не предусмотрено, но даже при таких обстоятельствах вычислять размеры блока значительно проще:
– ширина: 650 + 20 + 20 = 690 px;
– высота: 300 + 20 + 20 = 340 px.

Блочная модель CSS: Стандартная и альтернативная модели

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

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

Самое простое решение проблемы – inline-block. Мы показываем содержимое элемента как блок, но он не будет занимать всю ширину родителя. Получается микс строки и блока. В этом случае никаких проблем с отображением объекта в соответствии с нашей задумкой не будет.

Пример - HTML

Пример – CSS

Элемент <q> имеет высоту и ширину, отступы внутренние и внешние, а также границу в 4 пикселя. Хоть он и не занимает всю ширину родителя (тега <body>), но вполне соответствует заданным параметрам.

Элемент <q> со свойством display: inline-block;

Если не использовать декларацию display: inline-block;, то поведение текста с цитатой будет не столь очевидным, а параметры ширины и высоты полностью проигнорируются.

Элемент <q> БЕЗ свойства display: inline-block;

Для более детального ознакомления с CSS рекомендуется изучать официальную документацию (с сайта World Wide Web консорциума). Детальное описание свойств и их возможных значений, а также примеры применения доступны на сайте Mozilla (в том числе и на русском языке). Ссылки приведены ниже.

Дополнительные ресурсы по теме CSS

1. Спецификации и их описание: https://www.w3.org/Style/CSS/specs.en.html

2. Руководство от Mozilla: "https://developer.mozilla.org/ru/docs/Web/CSS/Reference"

Свойство box-sizing в CSS управляет тем, как размеры элемента (ширина и высота) рассчитываются с учетом отступов, границ и содержимого. Это свойство может принимать два основных значения: content-box и border-box. Давайте рассмотрим каждое из этих значений и их влияние на работу с элементами в коробочной модели.

1. box-sizing: content-box

По умолчанию (если не указано иное), элементы имеют значение content-box. Это означает, что свойства width и height задают только размеры содержимого элемента, и любые отступы (padding) и границы (border) добавляются к этим размерам.

Как это работает:

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

Пример:

Расчет общего размера:

Общая ширина:
Общая высота:

Таким образом, фактические размеры элемента будут 350px в ширину и 250px в высоту.

2. box-sizing: border-box

Когда вы используете border-box, свойства width и height учитывают как содержимое, так и отступы и границы. Это значит, что любые отступы и границы включаются в заданные размеры элемента.

Как это работает:

Ширина и высота элемента включают содержимое, отступы и границы.
Если вы укажете ширину 300px, это будет полная ширина, включая границы и отступы.

Пример:

Расчет общего размера:

Общая ширина: $300 p x$ (включает содержимое, отступы и границы)
Общая высота: $200 p x$ (включает содержимое, отступы и границы)

Таким образом, фактические размеры элемента остаются 300px в ширину и 200px в высоту, даже с учетом отступов и границ.

Сравнение `content-box` и `border-box`

Свойство	content-box	border-box
Ширина	Задает ширину содержимого	Задает полную ширину элемента
Высота	Задает высоту содержимого	Задает полную высоту элемента
Влияние padding	Увеличивает общие размеры	Не влияет на общие размеры
Влияние border	Увеличивает общие размеры	Не влияет на общие размеры