გამოიწერე YouTube-ის არხიyoutube logoგამოწერა

რა არის box model CSS-ში?

CSS-ში ერთ-ერთი ყველაზე საჭირო კონცეპტი არის Box model, დღევანდელ გაკვეთილში განვიხილავთ თუ როგორ მუშაობს ის.

წარმოვიდგინოთ, რომ CSS-ში გვაქვს ელემენტი, რომლის ზომაც არის 100px X 100px-ზე და ასევე ამ ელემენტს აქვს 10 პიქსელიანი ჩარჩო (border) და ასევე 20 პიქსელიანი (padding)

კოდის მაგალითი

div {
  widht: 100px;
  height: 100px;
  border: 10px solid red;
  padding: 20px;
}

ამ შემთხვევაში თუ დავაკვირდებით ჩვენი div ელემენტი რეალურად გაიზრდება ზომებში და 100 პიქსელს დაემატება 10 პიქსელი ყველა მხრიდან ხოლო (padding) 20 პიქსელი ყველა მხრიდან რაც გამოიწვევს ჩვენი ელემენტის გაზრდას, რომელიც ჯამურად გახდება 100px+10px+10px+20px+20px=160px

მსგავს ქცევას იწვევს ელემენტების ე.წ. default (საწყისი მნიშვნელობები) კონკრეტულად box-sizing: content-box;

იმისთვის, რომ ელემენტმა გარშემო არ მოიმიმატოს ჩარჩოს და padding-ის ზომები აუცილებელია box-sizing: content-box; -ის მნიშნველობა შევცვალოთ border-box-ზე

ბოქს მოდელის (box model)-ის ვიზუალური გამოსახვა

CSS-ის ბოქს მოდელი

კურსში შემავალი თემები

🔗 HTML🔗 CSS

დამატებითი რესურსები

სხვა კატეგორიები

შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა

ბოლოს დაწერილი ბლოგები პროგრამირებაზე

ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით