box-sizing: border-box xüsusiyyəti nədir və CSS-də hansı rolu oynayır?

box-sizing xüsusiyyəti elementin ümumi eni və hündürlüyünün necə hesablandığını müəyyən edir.

box-sizing: content-box (standart dəyər) — en və hündürlük yalnız məzmun (content) üçün nəzərdə tutulur. Padding və border göstərilən en və hündürlük dəyərlərinə əlavə olunur.

box-sizing: border-box — en və hündürlük padding və border daxil edir. content ölçüsü göstərilən ölçülərə uyğun olaraq sıxılır.

CSS-də box-sizing: border-box-ın rolu:

• Hesablama sadələşdirilməsi: Elementlərin ölçülərinin hesablanmasını asanlaşdırır, xüsusən padding və border istifadə edildikdə.
• Düzənliyin əvvəlcədən bilinə bilməsi: Blokların ölçülərini dəqiq təyin etməyə imkan verir, padding və border-dən asılı olmayaraq, düzəni daha əvvəlcədən bilinə bilər.
• Qutu modelində rahatlıq: Blokun ölçüsünü intuitiv başa düşməyə uyğundur — onun sərhədləri. Şəbəkələrin və sabit ölçülü komponentlərin yaradılmasını asanlaşdırır.

Nümunə:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Ümumi en = 100 + 10*2 + 1*2 = 122px */
  /* Ümumi hündürlük = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Ümumi en = 100px */
  /* Ümumi hündürlük = 100px */
  /* Məzmun 100 - 10*2 - 1*2 = 78px en və hündürlükdə olacaq */
}