61 lines
4.3 KiB
Markdown
61 lines
4.3 KiB
Markdown
---
|
|
sidebar_position: 4
|
|
---
|
|
|
|
# Блочная модель
|
|
Источник: DeepSeek
|
|
|
|
**Блочная модель CSS** (или **Box Model**) — это фундаментальная концепция, которая описывает, как элементы HTML отображаются на веб-странице. Каждый элемент на странице рассматривается как прямоугольный блок, который состоит из нескольких частей: содержимого, отступов, границ и внешних отступов. Понимание блочной модели важно для управления размерами, расположением и отступами элементов.
|
|
|
|
## Компоненты блочной модели
|
|
|
|
1. **Содержимое (Content):**
|
|
- Это внутренняя часть элемента, где отображается текст, изображения или другие элементы.
|
|
- Размеры содержимого определяются свойствами `width` (ширина) и `height` (высота).
|
|
2. **Внутренний отступ (Padding):**
|
|
- Это пространство между содержимым и границей элемента.
|
|
- Управляется свойствами `padding-top`, `padding-right`, `padding-bottom`, `padding-left` или сокращенным свойством `padding`.
|
|
3. **Граница (Border):**
|
|
- Это рамка вокруг элемента, которая находится между внутренним отступом и внешним отступом.
|
|
- Управляется свойствами `border-width`, `border-style`, `border-color` или сокращенным свойством `border`.
|
|
4. **Внешний отступ (Margin):**
|
|
- Это пространство между границей элемента и соседними элементами.
|
|
- Управляется свойствами `margin-top`, `margin-right`, `margin-bottom`, `margin-left` или сокращенным свойством `margin`.
|
|
|
|
## Схема блочной модели
|
|
```
|
|
+---------------------------+
|
|
| Margin |
|
|
| +---------------------+ |
|
|
| | Border | |
|
|
| | +--------------+ | |
|
|
| | | Padding | | |
|
|
| | | +--------+ | | |
|
|
| | | | Content| | | |
|
|
| | | +--------+ | | |
|
|
| | +--------------+ | |
|
|
| +---------------------+ |
|
|
+---------------------------+
|
|
```
|
|
|
|
|
|
## Размеры элемента
|
|
Общий размер элемента складывается из:
|
|
- Ширина: `width` + `padding-left` + `padding-right` + `border-left` + `border-right`.
|
|
- Высота: `height` + `padding-top` + `padding-bottom` + `border-top` + `border-bottom`.
|
|
|
|
## Свойство box-sizing
|
|
По умолчанию размеры элемента (`width` и `height`) относятся только к содержимому. Это может быть неудобно, так как добавление отступов и границ увеличивает общий размер элемента. Чтобы изменить это поведение, используется свойство `box-sizing`.
|
|
|
|
1. `content-box` (по умолчанию):
|
|
- Размеры элемента (`width` и `height`) относятся только к содержимому.
|
|
- Отступы и границы добавляются к общему размеру.
|
|
2. `border-box`:
|
|
- Размеры элемента включают содержимое, отступы и границы.
|
|
- Это упрощает расчеты и делает поведение более предсказуемым.
|
|
|
|
## Вывод:
|
|
- Блочная модель CSS состоит из **содержимого**, **внутренних отступов**, **границ** и **внешних отступов**.
|
|
- Свойство `box-sizing` позволяет управлять тем, как учитываются отступы и границы в размерах элемента.
|
|
- Понимание блочной модели важно для создания точных и предсказуемых макетов.
|