box-sizing: border-box xususiyati nima va u CSSda qanday rol o'ynaydi?

box-sizing xususiyati elementning umumiy kengligi va balandligini qanday hisoblashni belgilaydi.

box-sizing: content-box (standart qiymat) — kenglik va balandlik faqat mazmun (content) ga taalluqlidir. Padding va border ko'rsatilgan kenglik/balandlik qiymatlariga qo'shiladi.

box-sizing: border-box — kenglik va balandlik padding va borderni o'z ichiga oladi. content siqiladi, belgilangan o'lchamlarga mos kelishi uchun.

CSS'da box-sizing: border-box ning roli:

• Hisoblashlarni soddalashtirish: Elementlarning o'lchamlarini hisoblashni osonlashtiradi, ayniqsa padding va border ishlatilganda.
• Tartibga solishda oldindan aytib bo'ladiganlik: Bloklarning o'lchamlarini aniq belgilash imkonini beradi, padding va borderdan mustaqil, bu esa tartibni yanada oldindan aytib bo'ladigan qiladi.
• Quti modelida qulaylik: Blokning o'lchamini sezgir tushunishga mos keladi — uning ramkasi. Tarmoq va doimiy o'lchamli komponentlarni yaratishni osonlashtiradi.

Misol:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Umumiy kenglik = 100 + 10*2 + 1*2 = 122px */
  /* Umumiy balandlik = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Umumiy kenglik = 100px */
  /* Umumiy balandlik = 100px */
  /* Mazmun 100 - 10*2 - 1*2 = 78px kenglik va balandlikda bo'ladi */
}