Бокс модел деген эмне, ал эмне түзөт жана анын…

Бокс модел (CSS Box Model) — бул абстракттуу объект, ал HTML элементтери баракчада түзүлүштөр түрүндө көрсөтүлүшүн сүрөттөйт. Ал мазмундун өлчөмдөрүн жана жайгашуусун, ички аралыктарды, чектерди жана тышкы аралыктарды аныктайт.

Бокс моделинин төмөнкү бөлүктөрү бар:

Content: элементтин мазмуну (текст, сүрөттөр жана башка). Анын өлчөмү width жана height касиеттеринин жардамы менен аныкталат.
Padding: мазмун менен анын чегинин ортосундагы орун. Ал padding-top, padding-right, padding-bottom, padding-left же кыскача padding касиеттери менен аныкталат.
Border: ички аралыктар жана мазмундун тегерегиндеги чек. Ал border-width, border-style, border-color же кыскача border касиеттери менен аныкталат.
Margin: элементтин чек менен тышкы элементтердин ортосундагы орун. Ал margin-top, margin-right, margin-bottom, margin-left же кыскача margin касиеттери менен аныкталат.

Эки негизги бокс моделинин түрлөрү бар, алар box-sizing касиети аркылуу аныкталат:

content-box (өзүнчө мааниси): width жана height касиеттеринин жардамы менен белгиленген өлчөмдөр тек гана мазмунга тиешелүү. Padding жана Border кошулат бул өлчөмдөргө, жалпы өлчөмдү көбөйтөт.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Жалпы өлчөмгө 20px кошот ар бир багытта */
  border: 2px solid black; /* Жалпы өлчөмгө 4px кошот ар бир багытта */
  box-sizing: content-box; /* Стандарттык жүрүм-турум */
}
/* Жалпы өлчөм 124px x 124px болот */

border-box: width жана height касиеттеринин жардамы менен белгиленген өлчөмдөр мазмунду, padding жана чекти камтыйт. Padding жана чек жалпы өлчөмдү көбөйтпөйт, тескерисинче, мазмундун аймагын кыскартат.
```
div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Жалпы кеңдикке/биекке кирет */
  border: 2px solid black; /* Жалпы кеңдикке/биекке кирет */
  box-sizing: border-box;
}
/* Жалпы өлчөм 100px x 100px болот */
```

Көбүнчө border-box колдонулат, ал көбүрөөк алдын ала көрүүгө мүмкүндүк берет, өлчөмдөрдү так сактоо үчүн, мисалы, жооптуу дизайнда, анда элементтер белгилүү пайыздык кеңдикте болушу керек.

Бокс модел деген эмне, ал эмне түзөт жана анын түрлөрү кандай?