Какие знаешь виды CSS box model

В CSS существует два основных вида box model: content-box и border-box.

1. content-box (стандартный):
   Ширина (width) и высота (height) элемента включают только контент. Padding и border добавляются к этим размерам.
   css

   Копировать

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

2. border-box:
   Ширина и высота включают контент, padding и border. Удобен для точного контроля размеров.
   css

   Копировать

   .box {
     box-sizing: border-box;
     width: 100px;
     padding: 20px;
     border: 5px solid black;
     /* Фактическая ширина = 100px (контент сожмётся) */
   }

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