Модель блока — очень важная концепция в CSS, которая определяет, как элементы структурированы, размещены и отображаются на веб-странице. Она получила свое название, потому что CSS рассматривает каждый элемент так, как будто он находится в прямоугольном блоке.
Другими словами, CSS отображает каждый размеченный элемент в окне браузера как блок с содержимым. Каждый блок с содержимым представляет элемент в документе HTML или веб-странице.
Каждый блок содержимого может иметь несколько компонентов, включая поля, границы, отступы и само содержимое, как показано на рисунке ниже.
Стороны блока представлены в порядке по часовой стрелке: сверху, справа, снизу и слева. Пространство снаружи элемента называется margin. Внутри margin находится border, а внутри border — padding.
Внутри padding находится содержимое элемента. Посмотрите на рисунок ниже, где представлен пример модели CSS box для элемента HTML.
Компоненты блочной модели CSS
На приведенной выше диаграмме блочной модели CSS вы видите, как различные компоненты объединяются, чтобы создать блочную модель. Блочная модель CSS состоит из четырех основных компонентов, которые являются следующими:
1. Содержимое коробки:
Это область, где отображается фактическое содержимое элемента, например текст или изображения. Свойства ширины и высоты определяют размеры этого поля.
Свойство width определяет ширину области содержимого, а свойство height определяет высоту области содержимого. Например:
div {
width: 200px;
height: 150px;
}2. Мягкая коробка:
Окружение блока содержимого — это отступ. Это пространство между содержимым блока и его любой определенной границей. Другими словами, это пространство между границей блока и содержимым блока.
Вы можете задать отступы индивидуально для каждой стороны, используя свойства padding-top, padding-right, padding-bottom и padding-left, или совместно, используя сокращенное свойство padding. Например:
div {
padding: 10px; /* 10px padding on all sides */}
div {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
}
3. Пограничный блок:
Граница окружает отступ и содержимое элемента HTML. По умолчанию граница невидима и отделяет край одного блока от других окружающих блоков. Мы можем определить ширину, стиль и цвет границы, используя такие свойства, как border-width, border-style и border-color или совместно используя сокращенное свойство border.
Сокращенное свойство border задает ширину, стиль и цвет границы одновременно. Мы также можем использовать отдельные свойства border-width, border-style и border-color по отдельности для каждой стороны элемента HTML. Например:
div {
border: 2px solid #000; /* 2px solid black border */}
div {
border-width: 3px;
border-style: dashed;
border-color: #ff0000;
}
4. Поле поля:
Поле — это расстояние между границей блока и блоком рядом с ним. Оно создает белое пространство, которое отделяет один блок от других. Мы можем индивидуально задать поля для каждой стороны с помощью margin-top, margin-right, margin-bottom и margin-left или совместно с помощью сокращенного свойства margin.
Сокращенное свойство margin устанавливает все четыре поля, такие как top-margin, right-margin, bottom-margin и left-margin одновременно. Например:
div {
margin: 20px; /* 20px margin on all sides */}
div {
margin-top: 30px;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 15px;
}Таким образом, можно сказать, что блочная модель CSS представляет собой набор свойств, которые определяют количество свободного пространства вокруг элемента HTML, размеры, поля, границы и отступы.
Типы блочной модели в CSS
В CSS в основном существует два типа блочной модели:
- Блочные коробки
- Встроенные ящики
Блоки уровня блока представляют элементы уровня блока, а блоки уровня строки представляют элементы уровня строки. Элементы уровня блока всегда начинаются на следующей строке, а элементы уровня строки начинаются на той же строке.
Простая модель блока с полями, отступами и границами
Давайте рассмотрим пример, в котором мы оформим элемент div, используя все свойства блочной модели CSS.
Пример 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model Example</title>
<style>
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid blue;
margin: 30px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">
This is a box with margin, padding and border.
</div>
</body>
</html>
Выход:
В этом примере:
- Ширина и высота области контента составляют 300 пикселей и 200 пикселей соответственно.
- Внутри границы отступ добавляет 20 пикселей пространства вокруг содержимого.
- Граница представляет собой сплошную синюю линию шириной 5 пикселей.
- Поле добавляет 30 пикселей белого пространства за пределами границы, отделяя блок от других элементов.
Вложенные блоки в CSS
Когда один блок помещается внутрь другого блока, это называется вложенными блоками в CSS. Другими словами, размещение одного элемента HTML внутри другого элемента HTML называется вложенными элементами в CSS. Элемент, который помещается внутрь другого элемента, называется дочерним элементом этого элемента. Элемент, который содержит внутри себя другой элемент, называется содержащим или родительским элементом.
Самый верхний блок представляет собой самый верхний элемент, известный как элемент <html>. Каждый другой блок находится внутри другого блока, который также может быть внутри другого, и так далее. Это означает, что элемент, являющийся родителем одного элемента, может быть дочерним элементом другого, и так далее.
Это создает иерархию блочных блоков, где каждый элемент может содержать другие элементы, а эти элементы также могут содержать дополнительные элементы, образуя вложенную структуру элементов.
В примере 1 представлен визуализированный HTML-документ с иерархией блочных блоков. Самым внешним является элемент <html>, следующим является элемент <head>, содержащий элементы <meta>, <title> и <style>. После элемента <head> следует элемент <body>, содержащий элемент div.
Ключевые концепции вложенных блоков:
(1) Связь родитель-потомок: родительский блок содержит дочерний блок. Стили, примененные к родительскому блоку, могут влиять на дочерний блок, особенно в плане позиционирования, отступов, полей и границ.
(2) Наследование: Дочерние элементы наследуют некоторые свойства CSS от своих родительских элементов. Например, дочерний элемент наследует стили шрифтов и цвета от своего родительского элемента.
(3) Расчеты блочной модели: Каждый элемент, родительский или дочерний, следует блочной модели CSS независимо. Это означает, что поля, границы и отступы рассчитываются отдельно для каждого элемента.
Пример вложенных ящиков
Пример 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Boxes Example</title>
<style>
.outer-box {
width: 400px;
padding: 20px;
border: 5px solid black;
background-color: lightblue;
}
.inner-box {
width: 380px;
padding: 10px;
border: 2px solid green;
background-color: white;
}
</style>
</head>
<body>
<div class="outer-box">
This is an outer box.
<div class="inner-box">
This is an inner box.
</div>
</div>
</body>
</html>
Выход:
В этом примере:
- Внешняя коробка:
- Ширина: 400 пикселей
- Отступ: 20px
- Граница: 5 пикселей, сплошной черный цвет
- Цвет фона: светло-голубой
- Внутренняя коробка:
- Ширина: 380 пикселей
- Отступ: 10px
- Граница: 2 пикселя, сплошной зеленый цвет
- Цвет фона: Белый
Расчет размеров:
1. Внешняя коробка:
- Общая ширина:
- Содержание: 400 пикселей
- Отступ: 20 пикселей с каждой стороны (20 пикселей+20 пикселей)
- Граница: 5 пикселей с каждой стороны (5 пикселей+5 пикселей)
- Всего: 400 пикселей (контент)+40 пикселей (отступы)+10 пикселей (граница) = 450 пикселей
- Общая высота:
- Зависит от содержимого внутри, включая отступы и границы. Поскольку высота явно не задана, она увеличивается, чтобы соответствовать содержимому.
2. Внутренняя коробка:
- Общая ширина:
- Ширина установлена на 380 пикселей.
- После вычитания отступа и границы внутреннего блока:
- Отступ: 10 пикселей с каждой стороны (10 пикселей+10 пикселей) = 20 пикселей
- Граница: 2 пикселя с каждой стороны (2 пикселя+2 пикселя) = 4 пикселя
- Окончательная ширина контента: 380 пикселей – 20 пикселей (отступ) – 4 пикселя (граница) = 356 пикселей
- Общая высота:
- Подобно внешней коробке, она зависит от содержимого и увеличивается в размерах.
Свойство Box-Sizing в CSS
CSS предоставляет свойство box-sizing, которое используется для изменения модели CSS box по умолчанию для элемента HTML. Это свойство позволяет нам лучше контролировать макет, влияя на расчет ширины и высоты элемента. Свойство box-sizing принимает два основных значения. Они следующие:
1. поле содержимого (значение по умолчанию):
- Это значение включает только свойства ширины и высоты для содержимого элемента.
- За пределами поля содержимого добавляются отступы и границы, что увеличивает общий размер элемента.
2. рамка-ящик:
- Это значение включает свойства ширины и высоты, а также содержимое, отступы и границы. Это означает, что общая ширина и высота элемента останутся такими же, как указано, с отступами и границами, включенными в эти размеры.
Пример 3: Использование content-box (значение по умолчанию)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Box Example</title>
<style>
.content-box {
box-sizing: content-box;
width: 300px;
height: 200px;
padding: 20px;
border: 10px solid red;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="content-box">
This box uses the box-sizing property with content-box value.
</div>
</body>
</html>
Выход:
В этом примере:
- Указанная ширина составляет 300 пикселей, а высота — 200 пикселей.
- Общая ширина составляет 300 пикселей (контент)+20 пикселей (левый отступ)+20 пикселей (правый отступ)+10 пикселей (левая граница)+10 пикселей (правая граница) = 360 пикселей.
- Общая высота составляет 200 пикселей (контент)+20 пикселей (верхний отступ)+20 пикселей (нижний отступ)+10 пикселей (верхняя граница)+10 пикселей (нижняя граница) = 260 пикселей.
Пример 4: Использование значения border-box
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Box Example</title>
<style>
.border-box {
box-sizing: border-box;
width: 300px;
height: 200px;
padding: 20px;
border: 10px solid blue;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="border-box">
This box uses the box-sizing property with the border-box value.
</div>
</body>
</html>
Выход:
В этом примере:
- Указанная ширина составляет 300 пикселей, а высота — 200 пикселей.
- Общая ширина и высота остаются 300 пикселей и 200 пикселей соответственно, поскольку отступы и границы включены в эти размеры.
Свойство border-box часто используется для создания макетов, поскольку оно упрощает расчет размеров элементов. Нам не нужно складывать padding и border, чтобы вписать элемент в определенную область. Обычной практикой является установка box-sizing: border-box глобально для всех элементов с помощью универсального селектора, что можно сделать следующим образом:
*,
*::before,
*::after {
box-sizing: border-box;
}Пример 5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Global border-box Setting</title>
<style>
/* Apply border-box globally */*,
*::before,
*::after {
box-sizing: border-box;
}
.container {
width: 400px;
padding: 20px;
border: 10px solid black;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
This container uses the box-sizing property with the border-box value that is globally set for all other elements.
</div>
</body>
</html>
В этом примере указанная ширина.container составляет 400px. Общая ширина остается 400px, включая отступы и границу, из-за глобальной настройки значения border-box.
При глобальной установке box-sizing: border-box каждый элемент на странице будет автоматически использовать эту модель блока. Поэтому вам не нужно указывать ее индивидуально для каждого элемента в документе. Такой подход помогает веб-разработчику поддерживать согласованность во всем макете.
Модель CSS-блоков — это фундаментальная концепция, в которой HTML-документ рассматривается как иерархия прямоугольных блоков. Каждый блок в документе представляет элемент блочного уровня или элемент строчного уровня. Модель блоков обеспечивает структурированный способ управления интервалами и размерами элементов на веб-странице.
Понимая и используя свойства контента, отступов, границ и полей, вы можете контролировать макет и интервалы между элементами на веб-странице. Надеюсь, теперь вы понимаете основные концепции блочной модели CSS.
