კურსის დასრულების შემდეგ შეძლებთ 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)-ის ვიზუალური გამოსახვა
კომენტარები 0