Урок 17. Справочник: box-sizing, размеры и overflow

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

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

⚡ Кратко

Минимум на каждый день: box-sizing: border-box (предсказуемая ширина), overflow: auto (полосы при нужде), max-width: 100% (картинки не ломают макет).

Ключевые конструкции

Конструкция	Назначение
`box-sizing: content-box`	Стандартная модель (по умолчанию): padding и border прибавляются к width.
`box-sizing: border-box`	Предсказуемая модель: width включает padding и border.
`* { box-sizing: border-box }`	Глобальный сброс на все элементы (с `::before/::after`).
`width` / `height`	Фиксированный размер блока (трактуется по box-sizing).
`min-width` / `max-width`	Нижняя и верхняя граница ширины («вилка»).
`min-height`	Минимальная высота без жёсткого ограничения роста.
`max-width: 100%`	Ограничивает элемент шириной родителя.
`overflow: visible`	По умолчанию: лишнее содержимое торчит наружу.
`overflow: hidden`	Обрезает лишнее содержимое, прокрутки нет.
`overflow: scroll`	Полосы прокрутки показываются всегда.
`overflow: auto`	Добавляет прокрутку только при необходимости.
`overflow-x` / `overflow-y`	Управление переполнением по горизонтали / вертикали отдельно.
`overflow-wrap: break-word`	Разрешает перенос длинных слов и ссылок.
`text-overflow: ellipsis`	Обрезанный текст в одну строку заканчивается многоточием «…».

⚠️ Проверить по документации (MDN): overflow-x/overflow-y и text-overflow: ellipsis — дополнение за рамками базовой темы урока. text-overflow работает только вместе с overflow: hidden и white-space: nowrap.

Как это выглядит

Очень длинный заголовок, который не помещается в одну строку

.title {
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* … вместо обрыва */
}