Модели қутӣ дар CSS чист?

CSS-да қуту моделін сипаттайды, ол элементтің веб-бетте қанша орын алатынын қалай есептейтінін көрсетеді. Ол мыналарды қамтиды:

• Мазмұн: Элементтің нақты мазмұны үшін аймақ (мәтін, суреттер).
• Padding (ішкі шекара): Мазмұн мен элементтің шекарасы арасындағы бос орын.
• Border (шекара): Padding мен мазмұнды айналдыратын шекара.
• Margin (сыртқы шекара): Элементтің шекарасы айналасындағы кеңістік, оны басқа элементтерден бөледі.

Әдепкі өлшемі (стандартты модель box-sizing: content-box) мазмұн, padding және шекараның өлшемдерінің қосындысы арқылы анықталады. Margin жалпы кеңістікке қосылады, бірақ элементтің өз өлшеміне әсер етпейді.

box-sizing: border-box қасиеті элементтің өлшемін есептеуді өзгертеді, padding және шекараны жалпы ені мен биіктігіне қосады. Бұл жағдайда, элементтің өлшемі width/height арқылы анықталады, ал padding мен шекара "орын алады" мазмұн ішінде.

/* Стандартты модель (әдепкі) */
.element-content-box {
  width: 100px; /* Мазмұнның өлшемі */
  padding: 10px;
  border: 5px solid black;
  /* Жалпы ені: 100px (мазмұн) + 10px (сол padding) + 10px (оң padding) + 5px (сол шекара) + 5px (оң шекара) = 130px */
}

/* border-box моделін */
.element-border-box {
  width: 100px; /* Жалпы ені: мазмұн + padding + шекара */
  padding: 10px;
  border: 5px solid black;
  /* Мазмұнның өлшемі: 100px - 10px (сол padding) - 10px (оң padding) - 5px (сол шекара) - 5px (оң шекара) = 70px */
}

Қуту моделін түсіну, бетте элементтерді дәл орналастыру және құрастыру үшін маңызды.