чӣ хосият аст: box-sizing: border-box ва чӣ нақш дорад дар CSS?

box-sizing хусусиятии муайян мекунад, ки чӣ гуна ҳисоб карда мешавад паҳно ва баландии умумии унсури.

box-sizing: content-box (қимати стандартӣ) — паҳно ва баландӣ танҳо ба мундариҷа (content) дахл дорад. Padding ва border ба арзишҳои нишон додашудаи паҳно ва баландӣ илова мешаванд.

box-sizing: border-box — паҳно ва баландӣ дохил мешаванд padding ва border. Мундариҷа (content) кӯтоҳ карда мешавад, то дар дохили андозаҳои нишон додашуда ҷойгир шавад.

Роли box-sizing: border-box дар CSS:

• Осон кардани ҳисобҳо: Ҳисоб кардани андозаҳои унсурҳоро осон мекунад, махсусан вақте ки истифода мешавад padding ва border.
• Пешгӯии дарозӣ: Имкон медиҳад, ки андозаҳои блокҳоро дақиқ муайян кард, новобаста аз padding ва border, ки ин ба тартиб бештар пешгӯишаванда мекунад.
• Ҳайати қулай дар моделҳои қуттӣ: Мувофиқ бо фаҳмиши интуитивии андозаи блок — ҳошияҳои он. Ҳамворсозии шаблонҳо ва компонентҳои бо андозаи доимӣ осон мешавад.

Масалан:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Андозаи умумӣ = 100 + 10*2 + 1*2 = 122px */
  /* Андозаи умумӣ = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Андозаи умумӣ = 100px */
  /* Андозаи умумӣ = 100px */
  /* Мундариҷа дар 100 - 10*2 - 1*2 = 78px дар паҳно ва баландӣ хоҳад буд */
}