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

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

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

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

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

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

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

საიტის აწყობა (ავტორიზაცია) საიტის აწყობა (რეგისტრაცია, პაროლის აღდგენა) საიტის აწყობა (header, nav, footer), ცოტა რამ display:flex-ზე საიტის აწყობა, როგორ მუშაობს CSS flexbox (display: flex;) საიტის აწყობა (ბლოგის გვერდი, ნაწილი #1) Git-ის დაყენება Windows-ზე Linux-ის ძირითადი ბრძანებები ვებ-დეველოპმენტისთვის CSS position property, ვისწავლოთ CSS პოზიციები ფონტების მიბმა საიტზე, როგორ მივაბათ ფონტები CSS @import and CSS variables, იმპორტი და ცვლადები CSS-ში html tables, ცოტა რამ ცხრილების შესახებ როგორ შევქმნათ და ავტვირთოთ პროექტი Git-ზე ბლოგის გვერდი #2, ვაწყობთ ქარდებს display: grid; თვისება, რომელიც აუცილებელია ვიცოდეთ display:grid-ის საზომი ერთეულები fr-ები (fractions) ბლოგის ლისტის გვერდის დასრულება display:grid-ის დახმარებით ბლოგის დეტალური გვერდის დასრულება კონტაქტის გვერდის დასრულება დახმარების გვერდის დასრულება საიტის აწყობა: ცოტა რეფაქტორინგი და ბოქსმოდელის განხილვა საიტის აწყობა: პირელი ნაბიჯები რესპონსივ დიზაინში საიტის აწყობა: რესპონსივი, მთავარი გვერდი საიტის აწყობა: მობილური ნავიგაცია როგორ გავასწოროთ HTML ელემენტი ცენტრში როგორ გავაკეთო dark theme