Урок 17. Ошибки: box-sizing, размеры и overflow

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

#box-sizing #width #min-width #min-height #max-width #overflow #overflow-x #overflow-wrap #text-overflow

⚡ Кратко

Топ-3: (1) жёсткая height + длинный текст = вылезает наружу; (2) overflow: hidden прячет нужное; (3) картинка без max-width: 100% ломает макет. Проверяй computed styles в DevTools.

Типичные ошибки

1. Жёсткая высота для текста

Слева — фиксированная height с overflow: visible: длинный текст вылезает за границу и наезжает на соседей. Справа — min-height: блок растёт под содержимое.

❌ height: 60px — текст вылезает за нижнюю границу блока и портит макет ниже.

✅ min-height: 60px — блок спокойно вырастает под весь текст.

.bad  { height: 60px; }      /* текст вылезет */
.good { min-height: 60px; }  /* блок растёт */

2. overflow: hidden скрывает важное

Обрезка спрятала вторую половину кнопок. Проверяйте, не теряются ли элементы управления.

[Сохранить] [Отмена] [Удалить] — последние кнопки обрезаны и недоступны

/* было: overflow: hidden — кнопки пропали */
.toolbar { overflow: auto; }   /* стало: можно доскроллить */

3. Забывают псевдоэлементы в reset

box-sizing лучше задавать и для ::before/::after, иначе декоративные элементы считаются по другой модели.

4. Картинки выходят за контейнер

Почти всегда нужен max-width: 100%; height: auto, иначе большое изображение вызывает горизонтальную прокрутку.