Урок 17. Домашнее задание: box-sizing, размеры и overflow

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная
#box-sizing #width #min-width #min-height #max-width #overflow #overflow-x #overflow-wrap #text-overflow

⚡ Кратко

Соберите карточку товара фиксированной ширины с border-box, безопасной картинкой (max-width: 100%) и аккуратным переполнением. Сдать — видимый результат + объяснение свойств.

Что сделать

  1. Соберите карточку товара с изображением, описанием и кнопкой.
  2. Добавьте глобальный border-box reset в начало CSS.
  3. Сделайте изображение безопасным через max-width: 100%; height: auto.
  4. Задайте карточке width и убедитесь (DevTools → Computed), что padding и border её не «распухают».
  5. Проверьте длинный текст/URL и исправьте переполнение через overflow-wrap: break-word.

Ориентир: к какому результату стремимся

Название товара

Короткое описание товара в две-три строки.

*, *::before, *::after { box-sizing: border-box; }

.product {
  width: 240px;       /* ровно 240px благодаря border-box */
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}
.product img { max-width: 100%; height: auto; }
.product p   { overflow-wrap: break-word; }

Критерии сдачи

  • Страница открывается локально с диска (без сервера).
  • CSS вынесен в отдельный файл или отдельный блок примера.
  • Включён глобальный border-box; карточка не шире заданной width.
  • Картинка не вызывает горизонтальной прокрутки; длинный текст переносится.
  • Поведение проверено через DevTools (вкладка Computed: box-sizing, overflow).