რა არის ბლოკური მოდელი CSS-ში?

CSS-те қуту моделi әр элементке арналған тік бұрышты аймақты сипаттайды және оның өлшемдері мен орналасуын есептеу үшін пайдаланылады. Ол төрт бөлікке бөлінген:

• Мазмұн қутысы: Элементтің мазмұны (мәтін, суреттер және т.б.) көрсетілетін аймақ. Оның өлшемі width және height қасиеттері арқылы анықталады.
• Паддинг қутысы: Мазмұн шекарасы мен элемент шекарасы арасындағы бос орын. Оның өлшемі padding қасиетімен анықталады. Элементтің фон түсі мен суреті осы аймаққа таралады.
• Шекара қутысы: Элементтің шекарасы, ол паддинг қутысын қоршап тұрады. Оның өлшемі border қасиеттерімен анықталады.
• Марджин қутысы: Элемент шекарасының айналасындағы бос орын, оны басқа элементтерден бөледі. Оның өлшемі margin қасиетімен анықталады. Бұл аймақ әрқашан толық мөлдір.

Стандартты элемент өлшемі келесідей есептеледі:

ені = width + padding-left + padding-right + border-left-width + border-right-width
биіктік = height + padding-top + padding-bottom + border-top-width + border-bottom-width

box-sizing қасиеті бұл моделді өзгертуге мүмкіндік береді:

• content-box (әдепкі): width және height өлшемдері тек мазмұн қутысына қатысты.
• border-box: width және height өлшемдері padding және шекараны қамтиды.

.element-default {
  width: 100px; /* Мазмұн қутысының ені = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Шынайы элементтің ені: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Шынайы элементтің ені = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Мазмұн қутысының ені: 100 - 10 - 10 - 5 - 5 = 70px */
}