რა არის ყუთის მოდელი, რა შედგება და რა ტიპები არსებობს?

ბოქსის მოდელი (CSS Box Model) — ეს აბსტრაქტული ობიექტია, რომელიც აღწერს, როგორ წარმოადგინიან HTML ელემენტები გვერდზე მართკუთხა ბლოკებად. იგი განსაზღვრავს შიგთავსის, შიდა შუალედების, საზღვრის და გარე შუალედების ზომებს და განლაგებას.

ბოქსის მოდელი შედგება შემდეგი ნაწილებისგან:

• Content: ელემენტის შიგთავსი (ტექსტი, სურათები და ა.შ.). მისი ზომა განსაზღვრავს width და height თვისებებით.
• Padding: სივრცე შიგთავსსა და საზღვარს შორის. განსაზღვრავს padding-top, padding-right, padding-bottom, padding-left ან მოკლედ padding თვისებით.
• Border: საზღვარი შიგთავსსა და შიდა შუალედებს შორის. განსაზღვრავს border-width, border-style, border-color ან მოკლედ border თვისებით.
• Margin: სივრცე ელემენტის საზღვრისა და გარე ელემენტებს შორის. განსაზღვრავს margin-top, margin-right, margin-bottom, margin-left ან მოკლედ margin თვისებით.

არსებობს ორი ძირითადი ბოქსის მოდელი, რომლებიც განსაზღვრულია box-sizing თვისებით:

• content-box (ნაგულისხმევი მნიშვნელობა): ელემენტის სიგანე და სიმაღლე, განსაზღვრული width და height თვისებებით, ეხება მხოლოდ შიგთავსის სფეროს. Padding და Border დამატებულია ამ ზომებზე, ზრდის საერთო ზომას.

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* საერთო ზომაში დამატება 20px თითო მიმართულებით */
    border: 2px solid black; /* საერთო ზომაში დამატება 4px თითო მიმართულებით */
    box-sizing: content-box; /* ნაგულისხმევი ქცევა */
  }
  /* საერთო ზომა იქნება 124px x 124px */
  

• border-box: ელემენტის სიგანე და სიმაღლე, განსაზღვრული width და height თვისებებით, მოიცავს შიგთავსს, padding-ს და border-ს. Padding და Border არ ზრდიან საერთო ზომას, არამედ "შესამცირებენ" შიგთავსის სფეროს.

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* ჩართული საერთო სიგანეში/სიმაღლეში */
    border: 2px solid black; /* ჩართული საერთო სიგანეში/სიმაღლეში */
    box-sizing: border-box;
  }
  /* საერთო ზომა იქნება 100px x 100px */
  

ხშირად გამოიყენება border-box, რათა უფრო პროგნოზირებადი იყოს ელემენტების ზომების ქცევა, როდესაც ემატება padding და border. ეს მოსახერხებელია, მაგალითად, რეაგირებადი განლაგებების შექმნისას, სადაც ელემენტები უნდა იკავებდეს გარკვეულ პროცენტულ სიგანეს.