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

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

⚡ Кратко

Решение засчитано, если вы можете объяснить почему каждое свойство стоит здесь. Ниже — код с живым результатом для ключевых заданий.

Разбор заданий

Задания 1–2: content-box / border-box и сброс

Одинаковая запись, но второй блок включает padding и border в свою ширину.

content-box → 296px на экране
border-box → 240px на экране
*, *::before, *::after { box-sizing: border-box; }

.a { box-sizing: content-box; width: 240px; padding: 24px; border: 4px solid #ea580c; }
.b { box-sizing: border-box;  width: 240px; padding: 24px; border: 4px solid #0f766e; }

Задание 3: overflow auto vs hidden

auto показывает весь контент через прокрутку; hidden прячет лишнее без возможности увидеть.

overflow: auto — внутри появляется прокрутка, и весь длинный текст остаётся доступным пользователю.
overflow: hidden — конец длинного текста просто исчезает без следа.
.scrollable { height: 80px; overflow: auto; }   /* видно всё */
.clipped    { height: 80px; overflow: hidden; }  /* часть скрыта */

Задания 4–5: перенос URL и безопасная картинка

https://example.com/very/long/path/that/breaks/inside/the/box 
.box   { overflow-wrap: break-word; }
.box img { max-width: 100%; height: auto; }

Проверочные ответы

  1. border-box делает размеры компонентов проще для расчёта: width = внешний размер.
  2. Глобальный сброс применяют через *, *::before, *::after, чтобы захватить и псевдоэлементы.
  3. overflow: auto лучше hidden, если пользователь должен видеть весь контент.
  4. Длинные URL чинятся через overflow-wrap: break-word.