CSSте кутучанын модели эмне?

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

1. Content (Мазмун): Элементтин чыныгы мазмуну жайгашкан аймак (текст, сүрөттөр жана башка). Анын өлчөмү width жана height касиеттери менен аныкталат.

2. Padding (Ички жээк): Мазмун менен элементтин чегинен ортосундагы көргөзбөгөн аймак. padding-top, padding-right, padding-bottom, padding-left же кыскача padding касиеттери менен белгиленет.

3. Border (Чек): Padding жана Contentти айландырган сызык. Анын стили, калындугу жана түсү border-width, border-style, border-color касиеттери же кыскача белгиленет, мисалы border.

4. Margin (Чет): Элементтин чек арасындагы көргөзбөгөн аймак, ал башка элементтерден бөлүп турат. margin-top, margin-right, margin-bottom, margin-left же кыскача margin касиеттери менен белгиленет. Жакынкы блоктордун маржалары кыскаша алат.

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

box-sizing: border-box колдонулганда, width жана height касиеттери Content, Padding жана Borderди камтыйт. Margin ар дайым жалпы өлчөмгө кошулат, box-sizing кандай болбосун.

Мисал:

div {
  width: 100px; /* Contentтин кеңдиги (content-box үчүн) же бүт элементтин өлчөмү (border-box үчүн) */
  height: 50px; /* Contentтин бийиктиги (content-box үчүн) же бүт элементтин өлчөмү (border-box үчүн) */
  padding: 10px; /* Ички жээк */
  border: 2px solid black; /* Чек */
  margin: 15px; /* Чет */
}

box-sizing маанисине жараша, реалдуу өлчөмдөр ар башка болот:

• box-sizing: content-box: Чыныгы кеңдик = 100px (Content) + 10px (Padding-сол) + 10px (Padding-оң) + 2px (Чек-сол) + 2px (Чек-оң) = 124px. Чыныгы бийиктик = 50px (Content) + 10px (Padding-өңү) + 10px (Padding-төмөнү) + 2px (Чек-төмөнү) + 2px (Чек-жогорку) = 74px.
• box-sizing: border-box: Чыныгы кеңдик = 100px (Content + Padding + Border). Чыныгы бийиктик = 50px (Content + Padding + Border).

Четтик маржа margin: 15px бул жалпы өлчөмгө кошулат.