В чем разница между Content-Box и Border-Box

Разница в расчете размеров элемента.

Content-Box (по умолчанию):

• width и height определяют размеры контента.
• Отступы (padding) и границы (border) добавляются к общей ширине/высоте.

Border-Box:

• width и height включают контент, отступы и границы.
• Удобно для верстки, так как размеры элемента предсказуемы.

Пример:

.box-content {
  box-sizing: content-box; /* дефолт */
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Фактическая ширина: 200 + 20*2 + 5*2 = 250px */
}

.box-border {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Фактическая ширина останется 200px */
}

Для удобства часто используют * { box-sizing: border-box; } в CSS.