რა არის box-sizing: border-box მახასიათებელი და რა როლი აქვს CSS-ში?

box-sizing თვისება განსაზღვრავს, როგორ ითვლება ელემენტის საერთო სიგანე და სიმაღლე.

box-sizing: content-box (ნაგულისხმევი მნიშვნელობა) — სიგანე და სიმაღლე ეხება მხოლოდ შიგთავსს (content). Padding და border ემატება მითითებულ სიგანეს/სიმაღლეს.

box-sizing: border-box — სიგანე და სიმაღლე მოიცავს padding და border-ს. შიგთავსი (content) მცირდება, რათა მოერგოს მითითებულ ზომებს.

CSS-ში box-sizing: border-box-ის როლი:

• გადაწყვეტილების გამარტივება: ამარტივებს ელემენტების ზომების გამოთვლას, განსაკუთრებით 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 სიგანეზე და სიმაღლეზე იქნება */
}