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

საიტის აწყობა: ცოტა რეფაქტორინგი და ბოქსმოდელის განხილვა

მოცემულ ვიდეოში footer-ს ვამაგრებთ დოკუმენტის ბოლოში, მიუხედავად იმისა, თუ რა ზომის არის ჩვენი კონტეინერი სიმაღლეში, ასევე განვიხილეთ ცოტა რამ box-model-ის შესახებ

 

მნიშვნელობა აღწერა
box-sizing: border-box; border-box-ის შემთხვევაში ჩვენს კონტეინერს  padding-ების და border-width-ის ზომები აკლდება შიდა მხრიდან
box-sizing: content-box; content-box-ის შემთხვევაში ჩვენს კონტეინერს  padding-ების და border-width-ის ზომები ემატება გარე მხრიდან

 

მაგალითისთვის თუ გვაქვს 200X200-ზე ზომის კონტეინერი, და მას გაწერილი აქვს box-sizing: border-box; მასზე პადინგების ან ბორდერის მინიჭების შემთხვევაშიც კონტეინერის ზომა დარჩება ისევ 200X200-ის ზომის.

box-sizing:content-box; ის შემთხვევაში კონტენერს დაემატება padding-ების და border-width-ის ზომები, მაგალითად თუ padding: 10px; გვექნება კონტეინერი გახდება 220X220-ის ზომის, ვინდაიდან ყოველი გვერდიდან მიემატება 10-10 პიქსელი

პ.ს.

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

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

🔗 HTML🔗 CSS

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

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

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

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

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