CSSте блоктук модель деген эмне?

CSSте куту моделинде ар бир элемент үчүн түзүлгөн түз бурчтуу аймакты сүрөттөйт жана анын өлчөмдөрүн жана жайгашуусун эсептөөгө колдонулат. Ал төрт бөлүктөн турат:

• Мазмун кутусу: Элементтин мазмуну (текст, сүрөттөр жана башка) көрсөтүлүүчү аймак. Анын өлчөмү width жана height касиеттери менен аныкталат.
• Padding кутусу: Мазмун чегарасы менен элементтин чегарасы ортосундагы боштук. Анын өлчөмү padding касиети менен аныкталат. Элементтин фон түсү жана сүрөтү бул аймакка кеңейтилет.
• Чек ара кутусу: Элементтин чек арасы, 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 */
}