Box model

Каждый элемент — box: content, padding, border, margin. `box-sizing` определяет, входят ли padding и border в width и height.

					*, *::before, *::after { box-sizing: border-box; }

.box {
  width: 200px;
  padding: 16px;
  border: 2px solid;
  /* border-box: общая ширина остаётся 200px */
}
				

Margin collapse: соседние вертикальные margin блочных box могут схлопнуться в один. Overflow (`hidden`, `auto`, `scroll`) создаёт scroll containers и может обрезать focus ring или задать formatting context.

Intrinsic sizing: min-content, max-content и fit-content объясняют, почему flex items не сжимаются без `min-width: 0`.

На интервью: content-box vs border-box, правила margin collapse и побочные эффекты overflow.

Компромисс: точность content-box против предсказуемости border-box при расчёте размеров компонентов.

Типовые ошибки: фиксированная ширина плюс padding даёт overflow при content-box; `overflow: hidden` скрывает focus и неожиданно ловит positioned потомков.

Чеклист:

• По умолчанию border-box для компонентов.
• Учитывайте padding и border в размерах.
• Знайте, когда margins схлопываются.
• Overflow — поведение layout, не хак для обрезки.