| Элемент | Описание |
| Блочные элементы | Занимают всю доступную ширину, начинаются с новой строки |
| Строчные элементы | Занимают только необходимое пространство |
- width - задает ширину блока
- height - определяет высоту
- margin - внешние отступы
- padding - внутренние отступы
- border - рамка вокруг блока
- Создайте HTML-элемент div
- Добавьте класс для стилизации
- Задайте основные параметры в CSS
- Добавьте содержимое внутри блока
| Тип блока | Назначение |
| Контейнер | Ограничивает ширину контента |
| Хедер | Верхняя часть страницы |
| Футер | Нижняя часть страницы |
| Сайдбар | Боковая панель |
- Static - обычный поток документа
- Relative - относительно обычного положения
- Absolute - относительно ближайшего позиционированного предка
- Fixed - относительно окна браузера
- Sticky - гибрид relative и fixed
- Flexbox для одномерного расположения
- CSS Grid для сложных двумерных макетов
- Использование display: flex или display: grid
| Метод | Преимущество |
| Использование семантических тегов | Улучшает SEO и доступность |
| БЭМ-методология | Позволяет создавать масштабируемые стили |
| CSS-переменные | Упрощает поддержку и изменение стилей |
- Избыточная вложенность блоков
- Использование div вместо семантических тегов
- Неучет особенностей блочной модели при расчетах
- Пренебрежение адаптивностью
Грамотное использование блоков - основа современной веб-разработки. Понимание блочной модели CSS позволяет создавать сложные, но поддерживаемые макеты. Сочетание семантической разметки с современными методами позиционирования дает наилучшие результаты при построении пользовательских интерфейсов.
