Коробчатая модель — это фундаментальный принцип, который должен понимать и уметь правильно применять каждый веб-дизайнер/веб-разработчик. Без правильного понимания боксовой модели создание сложных веб-страниц было бы тяжелым занятием, которое вызвано необходимостью иметь дело с большим количеством ошибок CSS.
В этой статье я объясню боксовую модель на примере бокса с внешними размерами (подробнее об этом позже). Внешний размер — это размер по умолчанию для каждого элемента HTML, который задается путем установки свойства box-sizing в content-box.
*{
box-sizing: content-box;
}
Что такое боксовая модель CSS?
Каждый элемент на веб-странице, от абзаца, изображения и заголовка до элемента с закругленными углами, живет внутри коробки. Конечно, эта рамка иногда может быть невидимой, тем не менее, именно она определяет, как этот элемент отображается на веб-странице.
Так что же такое боксовая модель? Модель бокса — это термин, используемый для описания различных свойств CSS-бокса. Этими свойствами являются :
- Блок содержимого
- Отступы
- Граница
- Граница
Блок содержимого
Блок содержимого — это самая внутренняя часть блока. В нем размещается основное содержимое HTML, которое будет отображаться на веб-странице, например, текст, изображение или видеоплеер.
Ширина и высота этого блока определяются шириной и высотой содержимого соответственно и могут управляться с помощью параметров width и height.
div {
width: 120px;
height: 75px;
font-size: 15px;
color: blanchedalmond;
font-family: "Segoe UI";
background-color: #76a2aa;
}
ВЫХОД:
Из нашего результата следует, что нашим содержимым здесь будет текст «Content Box», а значение ширины и высоты содержимого будут значениями набора width и height. Остальные свойства были использованы для оформления содержимого путем увеличения его размера с помощью font-size, установки типа font-family с color, и придания блоку содержимого background-color, чтобы он был виден.
Примечание: В некоторых случаях, если поле использовалось для простого оформления веб-страницы, поле содержимого может быть пустым.
Отступы
Это пробел, который обрамляет поле содержимого. Ее также можно рассматривать как пространство между рамкой содержимого и рамкой границы.
Его значение по умолчанию для большинства браузеров равно 0px, и поскольку он действует как пробел, то не имеет цвета.
Свойство padding управляет отступом со всех сторон элемента и является сокращением для следующих свойств:
Свойство padding может принимать одно, два, три или четыре значения.
- Одно значение управляет величиной пространства подкладки со всех четырех сторон.
- При двух значениях первое значение управляет
padding-topиpadding-bottom. - При значении Three первое значение управляет
padding-top, второе значение управляетpadding-leftиpadding-right, а третье значение управляетpadding-bottom. - При четырех значениях первое, второе, третье и четвертое значения управляют
padding-top,padding-right,padding-bottomиpadding-leftсоответственно.
Чтобы определить padding любого элемента, мы можем написать:
.element {
padding-top : 20px;
padding-right : 30px;
padding-left : 30px;
padding-bottom : 10px;
}
ИЛИ используя сокращенный формат
.element {
padding : 20px 30px 10px;
}
Чтобы определить отступы нашего элемента div, мы напишем
div {
width: 120px;
height: 75px;
padding : 10px;
font-size: 15px;
color: blanchedalmond;
font-family: "Segoe UI";
background-color: #76a2aa;
}
ВЫВОД:
Из приведенного выше результата видно, что пространство подкладки по всем сторонам элемента div увеличилось на 10px, а так как мы работаем с рамкой Extrinsically size box, это увеличивает ширину и высоту этого элемента.
Чтобы вычислить новую ширину и высоту нашего элемента, сделаем следующее:
- Новая ширина =
padding-left+width+padding-right. - Новая высота =
padding-top+height+padding-bottom
ВЫВОД:
Вы также заметите, что пространство было добавлено к верхней и левой стороне нашего элемента, чтобы создать впечатление, что он сместился по диагонали.
Примечание: Padding не принимает отрицательных и цветовых значений. Цвет здесь использовался для иллюстрации того, как его значение влияет на размер любого элемента.
Граничная рамка
Этот блок охватывает блок отступов и блок содержимого. Свойство border управляет границами со всех сторон элемента. Чтобы применить границу к элементу, свойство border требует трех входных данных, которыми являются :
border-width
Border-width
border-width определяет толщину границы. Его значение может быть thin, medium, thick, а также < length> Чем больше его значение, тем больше увеличивается ширина элемента. Для управления шириной элемента border-width используются следующие свойства :
Border-style
border-style определяет, какой стиль будет у элемента границы. Его значение может быть следующим:
Border-color
Значение, которое принимает border-color, будет цветом границы.
Например, красный, #a79b9b, rgb(135, 187, 87) e.t.c.
Чтобы определить границу любого элемента, мы можем написать :
.element {
border-width : 20px;
border-style : solid;
border-color: brown;
}
ИЛИ используя сокращенный формат
.element {
border : 20px solid brown;
}
Вот как мы определяем границу для нашего элемента div
div {
width: 120px;
height: 75px;
padding : 10px;
border: 10px solid #7380ec;
font-size: 15px;
color: blanchedalmond;
font-family: "Segoe UI";
background-color: #76a2aa;
}
ВЫХОД:
Когда мы добавляем границу к коробке/элементу с экстремальными размерами, мы также увеличиваем ширину и высоту коробки.
- Новая ширина =
border-left-width+padding-left+width+padding-right+border=right-width. - Новая высота =
border-top-width+padding-top+height+padding-bottom+border-bottom-width
Маргинальная рамка
Это самая внешняя часть элемента. Эта часть бокс-модели отделяет элемент от остального окружения. По умолчанию ее значение равно 8px. Свойство margin управляет полями со всех сторон элемента.
Свойство margin может принимать как отрицательные, так и положительные значения. Мы знаем, что при увеличении margin увеличивается и отделение элемента от других элементов, но что происходит, когда значение margin начинает становиться отрицательным? Происходит то, что элемент начинает притягивать к себе все окружающие его элементы (можно представить это как черную дыру).
Для управления отступом с каждой стороны поля используются следующие свойства:
Свойство margin может принимать одно, два, три или четыре значения.
- Одно значение управляет величиной поля на всех четырех сторонах.
- При двух значениях первое значение управляет
margin-topиmargin-bottom. - При значении Three первое значение управляет
margin-top, второе значение управляетmargin-leftиmargin-right, а третье значение управляетmargin-bottom. - При четырех значениях первое, второе, третье и четвертое значения управляют
margin-top,margin-right,margin-bottomиmargin-leftсоответственно.
Наличие margin с отрицательным значением становится необходимым, когда его родительский элемент является body в DOM.
Для определения margin любого элемента мы можем написать :
.element{
margin-top :10px;
margin-right : 7px;
margin-bottom : 10px;
margin-left : 7px;
}
ИЛИ используя сокращение
.element{
margin : 10px 7px;
}
Давайте определим границу нашего элемента div
div {
width: 120px;
height: 75px;
padding : 10px;
border 10px solid #7380ec;
margin : 30px;
font-size: 15px;
color: blanchedalmond;
font-family: "Segoe UI";
background-color: #76a2aa;
}
ВЫВОД:
Из нашего результата видно, что элемент div был смещен на 30px вправо и на 30px вниз.
Примечание: Margin не увеличивает ширину или высоту какого-либо элемента, но в некоторых случаях может повлиять на высоту и ширину его родительского элемента, если высота и ширина родительского элемента не определены.
Внутренний размер по сравнению с внешним размером
При увеличении border или padding поля мы ожидаем, что ширина и высота поля должны увеличиться, но разработчики могут сохранить заданную width поля. Этот тип изменения размера называется внутренним изменением размера поля. Чтобы активировать внутреннее изменение размера для всех элементов в таблице стилей, просто добавьте этот блок кода.
* {
box-sizing : border-box;
}
Большинство разработчиков используют внутреннее изменение размера, чтобы размер элемента оставался неизменным даже при применении padding и border.
Вот как выглядел бы наш элемент div, если бы он имел внутренний размер.
Из изображения выше видно, что width (120px) не изменилась после добавления padding и border. Здесь произошло то, что padding и border начали заполнять пространство поля содержимого, а не добавлять его, как в случае с Extrinsic-sizing.
Допустим, вы создаете строку меню для телефона размером 390px.
Чтобы сместить содержимое от края строки меню, у вас есть возможность использовать только padding.
Если вы примените внешнее изменение размера, содержимое сместится за пределы поля, но ширина поля увеличится, что приведет к неструктурированному макету.
В случае применения внутреннего размера все было бы иначе. Вместо того чтобы добавлять ненужную ширину. Он просто добавляет подложку, не увеличивая ширину.
Обратная связь
Intrinsic Sizing звучит хорошо, но происходит нечто странное, когда размер нашего padding становится больше, чем width нашего элемента.
div{
box-sizing: border-box;
width: 120px;
height: 75px;
font-size: 15px;
padding: 86px !important;
margin: 30px;
border: 10px solid #7380ec;
color: blanchedalmond;
font-family: "Segoe UI";
background-color: #76a2aa;
}
Примененный padding заполняет все поле содержимого, и поскольку он больше, чем width, он увеличивает размер поля.
Заключение
В этой статье вы поняли:
- Что такое коробочная модель.
- Чем отличается каждый компонент бокс-модели и как они влияют на отображение элементов на веб-странице.
- Как реализовать боксовую модель в краткой форме.
- Различия между внутренними и внешними размерами.