Чем отличаются виды CSS box model и где они применяются?

Видов два, и переключает их свойство `box-sizing`: `content-box` и `border-box`.

content-box (по умолчанию)

width — это ширина только содержимого. Padding и border добавляются сверху.

.box { box-sizing: content-box; width: 200px; padding: 20px; border: 1px solid; }
/* итоговая ширина: 242px */

border-box

width включает content, padding и border — элемент занимает ровно указанную ширину.

.box { box-sizing: border-box; width: 200px; padding: 20px; border: 1px solid; }
/* итоговая ширина: 200px, под содержимое остаётся 158px */

Где применяют

• border-box — почти везде: сетки, колонки в процентах, поля ввода. Его часто включают глобально:

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

• content-box — когда важен именно размер содержимого (например, картинка строго заданной ширины внутри рамки).

Коротко для собеседования

content-box — ширина без padding и border (они добавляются), border-box — ширина вместе с ними; на практике почти всегда border-box.

Подробнее: MDN — box-sizing