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

მოცემულ ვიდეოში 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)-ად!