Как работает блочная модель CSS?
10 апреля 2022 г.Блочная модель CSS — это термин, используемый в сообществе CSS с очень небольшой системой отсчета, но, вероятно, это одна из самых фундаментальных вещей, которые вы можете знать в CSS.
Проще говоря, блочная модель определяет размер, поля и отступы любого объекта на странице. Это также относится к странному способу, которым CSS обрабатывает «встроенный» и «блочный» контент.
Коробочная модель
В HTML каждый элемент создает поле. Некоторые из этих элементов, такие как span и p, являются встроенными, то есть они соответствуют тексту, а не структурным элементам страницы.
Другие элементы, такие как div, представляют собой большие «блочные» элементы. Каждый элемент имеет свой тип, поэтому знакомство с ними полезно при изучении как HTML, так и CSS.
Блочные элементы имеют фиксированную ширину и высоту, которые иногда охватывают всю страницу, в то время как встроенные элементы находятся внутри строк текста, то есть у них есть содержимое, плавающее рядом с ними.
Другим часто используемым типом элемента является встроенный блок, представляющий собой просто блок фиксированной ширины и высоты внутри встроенного контекста, например, внутри блока текста.
Независимо от того, является ли элемент встроенным или блочным, все элементы имеют ряд основных атрибутов «коробки». Они показаны на изображении ниже.
![Как работает блочная модель CSS]
- Поля — это пространство снаружи (вокруг) HTML-элемента.
- Граница — это линия вокруг элемента, охватывающая отступы и ширину/высоту.
- Отступ — это пространство вокруг текста и края элемента.
- Ширина и высота относятся только к внутреннему пространству, исключая отступы.
Попробуйте блочную модель CSS
Ниже представлен простой элемент dev с несколькими ползунками. Используйте ползунки, чтобы настроить свойства блочной модели и посмотреть, как это повлияет на div:
Свойства блочной модели
У нас есть 5 основных свойств, каждое из которых можно определить отдельно. Ниже приведен div со всеми примененными к нему свойствами блочной модели:
``CSS
дел {
ширина: 100 пикселей;
высота: 100 пикселей;
отступ: 10 пикселей;
граница: 2px сплошной черный;
поле: 5px;
Для отступов и полей мы также можем ссылаться на каждую сторону отдельно в одной строке. В CSS, когда мы говорим о каждой стороне, порядок следующий: верх, право, низ, лево.
Взгляните на пример ниже:
``CSS
дел {
/* верхний отступ: 10px
отступ справа: 20px
заполнение нижней стороны: 5px
отступ слева: 10px
отступ: 10px 20px 5px 10px;
Мы также можем вызвать их напрямую, используя свойства padding-top, padding-right, padding-bottom и padding-left. Точно такие же свойства существуют и для маржи, т.е.:
``CSS
дел {
поле слева: 20px;
Краткий пример
Давайте еще немного подумаем о том, как работают блочные модели.
Мы создаем новый div и задаем ему ширину 40 пикселей, отступы 20 пикселей и границу 2 пикселя, как показано ниже. Мы также добавляем 4px поля.
``CSS
дел {
ширина: 40 пикселей;
отступ: 20 пикселей;
граница: 2px сплошной черный;
поля: 4px;
Какого размера коробка?
Поскольку ширина составляет 40 пикселей, отступы — 20 пикселей, а граница — 2 пикселя, общая ширина, отображаемая на странице, на самом деле составляет 84 пикселя!
Как это работает? Что ж, ширина, как показано на диаграмме, это ширина внутри набивки. Поскольку мы сказали, что отступ равен 20px, CSS добавляет 20px ко всем сторонам блока. Это означает 20 пикселей слева и 20 пикселей справа, что на 40 пикселей больше нашей ширины.
Наконец, у нас есть 2 пикселя границы вокруг div, то есть 2 пикселя с левой стороны и 2 пикселя с правой стороны. В результате получается 40 пикселей + 40 пикселей + 4 пикселя или 84 пикселя.
Отображать
CSS также имеет другое свойство, называемое отображением, которое, среди прочего, позволяет вам скрыть элемент. Отображение влияет на блочную модель, определяя, является ли объект блочным или встроенным. Для целей блочной модели давайте подумаем о нескольких ключевых свойствах:
- Нет - элемент скрыт.
- Встроенный - элемент встроенный, т.е. встроенный в текст, к нему не может быть добавлена ни ширина, ни высота.
- Блок - элемент является блоком, т.е. занимает всю ширину и начинается с новой строки.
- Inline-block — элемент встроен в текст, но к нему можно добавить ширину и высоту в CSS.
- Содержание - элемент отображается так, как будто его контейнер не существует, и добавляется в контейнер выше.
Как это выглядит в коде
Давайте рассмотрим быстрый пример.
Код показан ниже для примера, когда диапазон должен быть блочным элементом. Элементы span обычно являются встроенными, поэтому в этом примере этому span присваиваются свойства поля элемента, такого как div.
``CSS
охватывать {
дисплей: встроенный;
ширина: 100 пикселей;
высота: 30 пикселей;
отступ: 10 пикселей;
Размер коробки
То, как CSS управляет отступами, шириной и границей по отдельности, всегда было предметом разногласий в сообществе CSS. Таким образом, для исправления этого было создано свойство, известное как box-sizing. Размер коробки позволяет нам переопределить это поведение по умолчанию.
Давайте подумаем о нашей рамке шириной 40 пикселей, которая в итоге стала шириной 84 пикселя. Мы можем установить box-sizing на:
- Border-box: ширина включает рамку и отступы. Наша общая ширина теперь будет 40 пикселей, даже с отступами и рамкой.
- Content-box: поведение по умолчанию, ширина не включает границы и отступы. Наша общая ширина теперь будет 84px.
Теперь у нас гораздо больше контроля, и мы можем с уверенностью установить ширину, чтобы она отображалась на странице так, как мы ожидаем.
Границы
Границы — это еще один способ воздействия на блочную модель.
Границы могут быть определены как окружающие весь элемент или на определенной стороне, используя границы сверху, границы справа, границы снизу или границы слева. Вот пример:
``CSS
дел {
граница: 1px сплошной красный;
граница сверху: сплошной черный цвет 2 пикселя;
Свойство границы также можно разделить на отдельные строки. 1px сплошного красного цвета можно записать как:
``CSS
дел {
ширина границы: 1px;
цвет границы: красный;
стиль границы: сплошной;
Точно так же мы можем применить их к одной стороне, т. е. border-top-width, border-top-color или border-top-style для верхней стороны.
Мы можем сделать это для любой стороны.
Цвет принимает любой цвет, и вы можете узнать больше о цветах в разделе цвета. свойство border-style принимает следующие значения: None, Hidden, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset.
Радиус границы
Наконец, радиус границы позволяет нам добавлять закругленные края к нашим элементам div.
Обратите внимание, что это не влияет на блочную модель, поэтому размер элемента остается прежним, но влияет на его внешний вид.
Он принимает любые единицы, но я использую пиксели в качестве примера ниже. Чем больше единица, тем больше округление. Вот пример в коде того, как это выглядит:
``CSS
дел {
радиус границы: 20px;
Вывод
Это все, что вам нужно знать, чтобы понять блочную модель. Если вы хотите проверить свои знания, [я также сделал тест, который вы можете проверить здесь] (https://fjolt.com/quiz/css-box-model-quiz). Спасибо за чтение.
Ранее опубликовано здесь
Оригинал