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

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

⚡ Кратко

box-sizing решает, что означает заданная width (только содержимое или весь блок), а overflow — что делать с содержимым, которое не влезло. Вместе они делают размеры предсказуемыми.

О чём этот урок

box-sizing меняет расчёт ширины и высоты, а overflow управляет содержимым, которое не помещается в блок. Эти свойства убирают «лишние» пиксели и делают вёрстку предсказуемой.

По умолчанию действует content-box: width и height задают только content, а padding и border прибавляются сверху. Переключение на border-box включает размер padding и border в заданную ширину — блок перестаёт «распухать».

Опирается на урок 15 (блочная модель). Здесь мы решаем проблему «лишней ширины», которую там обнаружили.

Структура урока

Теория

Разбор темы и базовых правил.

Справочник

Справочник свойств и конструкций.

Примеры

Рабочие примеры с CSS-кодом.

Старый vs Новый

Сравнение слабого и поддерживаемого подхода.

Задания

Практика для самостоятельной работы.

Решения

Проверочные ответы и критерии.

Ошибки

Типичные ошибки и диагностика.

Домашнее задание

Домашняя работа для закрепления.

Ресурсы

Документация и справочные ссылки.

Практика

  • Создайте два блока одинаковой width: один content-box, другой border-box.
  • Добавьте padding и border, сравните фактическую ширину.
  • Добавьте глобальный сброс box-sizing.

Навигация