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

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

⚡ Кратко

5 коротких заданий на box-sizing и overflow. Проверяй каждый шаг через DevTools (вкладка Computed) и сравнивай с ожидаемым результатом.

Практические задания

  1. content-box vs border-box. Создайте два блока с одинаковыми width: 240px; padding: 24px; border: 4px. Первому задайте content-box, второму — border-box.
    Ожидаемый результат: первый занимает 296px, второй — ровно 240px.
  2. Глобальный сброс. Добавьте в начало CSS правило *, *::before, *::after { box-sizing: border-box; } и убедитесь, что первый блок из задания 1 теперь тоже стал 240px.
  3. Четыре overflow. Сделайте четыре блока 150×90px с длинным текстом и значениями visible, hidden, scroll, auto.
    Ожидаемый результат: у первого текст торчит наружу, у второго обрезан, у третьего полосы всегда, у четвёртого — только когда не влезает.
  4. Длинная ссылка. Поместите длинный URL в блок шириной 280px и исправьте разрыв макета через overflow-wrap: break-word.
  5. Безопасная картинка. Вставьте изображение в контейнер 200px и добавьте max-width: 100%; height: auto; — картинка должна вписаться без горизонтальной прокрутки.
content-box → 296px border-box → 240px
Эскиз ожидаемого результата задания 1: одинаковый код — разная ширина.