Какие значения принимает свойство box-sizing

Свойство box-sizing принимает два основных значения:

1. content-box (значение по умолчанию) - ширина и высота элемента рассчитываются только для контента, padding и border добавляются к ним.
2. border-box - ширина и высота включают padding и border, контент сжимается внутри этих границ.

Пример:

.box {
  box-sizing: border-box; /* padding и border включены в размеры */
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* Фактическая ширина останется 300px */
}

Также существует устаревшее значение padding-box (поддержка только в Firefox), которое включает padding в размеры, но не включает border.