Урок 17. Старый vs Новый: box-sizing, размеры и overflow

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

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

⚡ Кратко

Старый подход (content-box) заставляет вручную вычитать padding и border из ширины. Современный (border-box глобально) даёт width, которая означает ровно то, что написано.

Сравнение подходов

❌ Из лекции (старое): ломкий расчёт ширины на content-box

Две карточки по width: 50% в строке — но из-за padding и border каждая шире половины, и вторая «не влезает» рядом с первой.

width: 50% + padding + border = больше половины

вторая карточка переносится вниз

.card {
  width: 300px;
  padding: 24px;
  border: 2px solid #ccc;
}
/* Фактическая ширина: 300 + 48 + 4 = 352px */

Ширина становится больше ожидаемой — приходится вручную вычитать отступы из width.

✅ Современно: предсказуемый border-box

Те же две карточки с box-sizing: border-box ровно делят строку пополам, несмотря на padding и border.

width: 50% — это ровно половина

обе помещаются в строку

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 24px;
  border: 2px solid #ccc;
}
/* Фактическая ширина: 300px */

Полная ширина совпадает с width — расчёт колонок и сеток становится тривиальным.