Модуль: Блочная верстка. Flexbox

Блочная верстка — это подход к созданию структуры веб-страницы, при котором элементы размещаются внутри блоков (контейнеров). Каждый блок может содержать текст, изображения, другие блоки и т.д. Этот подход широко используется в современной веб-разработке благодаря своей гибкости и простоте.

Когда используется блочная верстка?

1. Создание структуры страницы:

   • Разделение страницы на логические блоки (шапка, основное содержимое, боковая панель, футер).

2. Группировка элементов:

   • Объединение связанных элементов (например, карточки товаров, меню, формы).

3. Адаптивный дизайн:

   • Упрощение создания макетов, которые корректно отображаются на разных устройствах.

4. Стилизация:

   • Применение стилей к группам элементов через родительский блок.

Преимущества блочной верстки

1. Гибкость:

   • Блоки можно легко перемещать, изменять их размеры и стили.

2. Семантичность:

   • Использование тегов <div>, <section>, <article>, <header>, <footer> делает код более понятным и структурированным.

3. Упрощение стилизации:

   • CSS-стили применяются к блокам, что упрощает управление внешним видом элементов.

4. Адаптивность:

   • Блочная верстка легко адаптируется под разные экраны с помощью медиазапросов и современных CSS-технологий (Flexbox, Grid).

5. Поддержка браузерами:

   • Блочная верстка поддерживается всеми современными браузерами.

Основные теги и css-свойства блочной верстки

1. Теги

• <div> — универсальный блочный элемент.

• <header> — шапка страницы или раздела.

• <main> — основное содержимое страницы.

• <section> — логический раздел страницы.

• <article> — независимый блок контента (например, статья).

• <aside> — боковая панель или дополнительный контент.

• <footer> — подвал страницы или раздела.

2. CSS-свойства

• Размеры:

  • width, height — ширина и высота блока.

  • max-width, min-width, max-height, min-height — ограничения размеров.

• Отступы:

  • margin — внешние отступы.

  • padding — внутренние отступы.

• Позиционирование:

  • display — определяет тип отображения блока (block, inline, inline-block, flex, grid).

  • position — управляет позиционированием (static, relative, absolute, fixed, sticky).

  • float — обтекание элементов (устаревший метод, но иногда используется).

• Фон и границы:

  • background-color, background-image — фон блока.

  • border, border-radius — границы и скругление углов.

• Текст:

  • text-align — выравнивание текста.

  • font-size, font-family, color — стилизация текста.