CSS-ში ყუთის მოდელი რა არის?

CSS ბლოკური მოდელი აღწერს, როგორ გამოჩნდებიან ელემენტები გვერდზე მართკუთხა ბლოკებად. იგი შედგება ოთხ ზონად ან ფენად, რომლებიც ერთმანეთს გადაჯაჭვულია, დაწყებული შიგთავსიდან:

1. Content (შიგთავსი): ზონა, სადაც მდებარეობს რეალური შიგთავსი ელემენტის (ტექსტი, სურათები და ა.შ.). მისი ზომა განისაზღვრება თვისებებით width და height.

2. Padding (შიგთავსის შიდა სავალი): გამჭვირვალე ზონა შიგთავსსა და ელემენტის საზღვარს შორის. განისაზღვრება თვისებებით padding-top, padding-right, padding-bottom, padding-left ან მოკლედ padding.

3. Border (საზღვარი): ხაზი, რომელიც გარს ეხვევა Padding-სა და Content-ს. მისი სტილი, სისქე და ფერი განისაზღვრება თვისებებით border-width, border-style, border-color ან მოკლედ, მაგალითად border.

4. Margin (გარე სავალი): გამჭვირვალე ზონა ელემენტის საზღვრის გარშემო, რომელიც გამოყოფს მას სხვა ელემენტებისგან. განისაზღვრება თვისებებით margin-top, margin-right, margin-bottom, margin-left ან მოკლედ margin. მეზობელი ბლოკების მარკები შეიძლება შეჯახოს.

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

box-sizing: border-box გამოყენებისას, width და height შეიცავს Content-ს, Padding-ს და Border-ს. Margin ყოველთვის ემატება საერთო ზომას, независимо box-sizing-დან.

მაგალითი:

div {
  width: 100px; /* Content-ის სიგანე (content-box-ისთვის) ან მთელი ელემტის ზომა (border-box-ისთვის) */
  height: 50px; /* Content-ის სიმაღლე (content-box-ისთვის) ან მთელი ელემტის ზომა (border-box-ისთვის) */
  padding: 10px; /* შიგთავსის სავალი */
  border: 2px solid black; /* საზღვარი */
  margin: 15px; /* გარე სავალი */
}

box-sizing-ის მნიშვნელობაზე დამოკიდებული, რეალური ზომები განსხვავებული იქნება:

• box-sizing: content-box: რეალური სიგანე = 100px (Content) + 10px (Padding-შე) + 10px (Padding-მდე) + 2px (საზღვარი-შე) + 2px (საზღვარი-მდე) = 124px. რეალური სიმაღლე = 50px (Content) + 10px (Padding-ზევით) + 10px (Padding-ქვემოთ) + 2px (საზღვარი-ზევით) + 2px (საზღვარი-ქვემოთ) = 74px.
• box-sizing: border-box: რეალური სიგანე = 100px (Content + Padding + Border). რეალური სიმაღლე = 50px (Content + Padding + Border).

გარე სავალი margin: 15px ემატება ამ საერთო ზომას.