გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

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

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML 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-ის ბოქს მოდელი

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

კომენტარები 0