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

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

⚡ Кратко

Рядом с каждым кодом — живой «Результат». Сравни блоки content-box и border-box, затем поменяй один overflow и предскажи, появится ли полоса прокрутки.

Рабочие примеры

В каждом примере сверху — реальный результат, ниже — код, который его создаёт. Сравнивай и экспериментируй.

1. content-box против border-box (одинаковый код, разный размер)

Оба блока: width: 240px; padding: 24px; border: 4px solid. Отличается только box-sizing — и реальная ширина различается.

content-box
width 240 + padding 48 + border 8 = 296px на экране
border-box
всё вместе ровно = 240px на экране 
.box-a {            /* реальная ширина = 296px */
  box-sizing: content-box;  /* по умолчанию */
  width: 240px;
  padding: 24px;
  border: 4px solid #ea580c;
}
.box-b {            /* реальная ширина = 240px */
  box-sizing: border-box;
  width: 240px;
  padding: 24px;
  border: 4px solid #0f766e;
}

2. Глобальный сброс на border-box

Один раз в начале CSS — и расчёт размеров становится интуитивным для всех элементов проекта.

width: 100% + padding 16px — но блок НЕ вылезает за родителя, потому что включён border-box. 
/* основа любого современного проекта */
*,
*::before,
*::after {
  box-sizing: border-box;
}

3. overflow: четыре поведения рядом

У всех блоков одинаковая высота 90px и слишком длинный текст. Разница — только в overflow.

visible
Текст торчит наружу за нижнюю границу блока и наезжает на соседей снизу.
hidden
Лишний текст просто обрезается и пропадает, прокрутки нет совсем.
scroll
Полосы прокрутки видны всегда, даже когда контента мало или он влезает.
auto
Полоса появляется только когда содержимое реально не помещается в блок. 
.box { width: 150px; height: 90px; }
.visible { overflow: visible; }  /* торчит наружу */
.hidden  { overflow: hidden;  }  /* обрезано */
.scroll  { overflow: scroll;  }  /* полосы всегда */
.auto    { overflow: auto;    }  /* полосы при нужде */

4. Картинка, которая не ломает макет

Большое изображение в узком контейнере без max-width вызывает горизонтальную прокрутку. max-width: 100% ужимает его до ширины родителя.

img max-width: 100%

«Картинка» сжата до ширины контейнера (200px).

.content img {
  max-width: 100%;  /* не шире родителя */
  height: auto;     /* пропорции сохраняются */
}

5. Читаемая колонка текста + перенос длинных слов

max-width: 70ch ограничивает строку для комфортного чтения, а overflow-wrap переносит длинные ссылки, чтобы они не разрывали макет.

Длинная ссылка переносится внутри блока: https://example.com/very/long/path/that/would/otherwise/overflow/the/container 
.content {
  max-width: 70ch;        /* комфортная ширина строки */
  margin: 0 auto;
  padding: 2rem;
  overflow-wrap: break-word;  /* рвём длинные слова/URL */
}
Эксперимент: открой пример 3 в DevTools (F12), выбери блок auto и удали часть текста — полоса прокрутки исчезнет сама. Затем у блока scroll сделай то же — полоса останется.