div-ებს ხშირად იმიტომ ვიყენებთ, რომ
გვერდის ყუთებად დაშლა გვინდა,

ან ამ ყუთების ზომების შეცვლა,
ან მათი გადაადგილება.

კარგი თვალია საჭირო იმისთვის,
რომ გადაწყვიტო სად რა განათავსო გვერდზე,

ისე რომ კარგად გამოიყურებოდეს.

ახლა, ჩვენ არ ვიზრუნებთ გვერდის
სილამაზეზე.

უბრალოდ, გაჩვენებთ თუ როგორ უნდა
შეცვალოთ რაღაცები.

მოდი, ზომა შევუცვალოთ
"official-info" div-ს.

ჩვეულებრივ, div-ი იღებს შესაძლებელი
სიგანის 100 პროცენტს.

ესაა მიზეზი თუ რატომ არის
ნაცრისფერი ყუთი მთელ სიგანეზე გაშლილი.

შეიძლება მინდოდეს, რომ
მან დაიკავოს 300 პიქსელი.

დავამატებ ახალ თვისებას CSS-ში
width: 300px; (სიგანე 300 პიქსელი)

სიგანე შეიცვალა, მაგრამ ახლა
სხვა რამ გავაკეთოთ.

მოდი, გამოვიყენოთ პროცენტობრივი სიგანე.

და ვთქვათ, რომ div-მა ყოველთვის უნდა
დაიკავოს შესაძლებელი სიგანის 70 %.

ახლა ტექსტი მოთავსებულია ამ
მცირე ყუთში.

და div-ი სიმაღლეში გაიზარდა.

თუ გვუსრს, ასევე შეგვიძლია
სიმაღლის კონტროლიც.

სიმაღლის თვისებით.

height: 180px;
(სიმაღლე 180 პიქსელი)

რაღაც სახალისო მოხდა.

ნაცრისფერი ყუთი შემცირდა 180 პიქსელამდე,

მაგრამ ტექსტი ყუთის გარეთ გადის.

რა მოხდა?

ეს იმ თვისების ბრალია, რომელსაც
'overflow'-ს (გადაღვრას) ვეძახით.

'overflow'-ს ჩვეულებრივი მნიშნველობა,
არის 'visible' (ხილვადი),

რაც ნიშნავს, რომ ელემენტის ზომა იცვლება
მაგრამ შიგთავსი გარეთ გამოდის,

რაც სულელურად გამოიყურება.

სხვა რა თვისებები გვაქვს გადაღვრისთვის?

შეგვიძლია ვცადოთ 'hidden' (დამალვა).

იგი, ჭრის შიგთავსის იმ ნაწილს,
რომელიც ფარგლებს სცდება.

მაგრამ, ჩვენ ეს არ გვჭირდება,

რადგანაც მაშინ მომხმარებელს არ ექნება
მთლიანი ინფორმაციის წაკითხვის საშუალება.

ჩვენ ასევე შეგვიძლია ვცადოთ 'auto',

რომელიც ეუბნება ბრაუზერს, რომ დაამატოს
ჩამოსაცურებელი თუ შიგთავსი იღვრება.

ახლა, შეგვიძლია ჩამოვაცუროთ ყუთის
შიგთავსი და ვნახოთ ტექსტი.

თუ გვინდა, შეგვიძლია უფრო
სპეციფიკური რამ ვქნათ:

შეგვიძლია, მივუთითოთ განსხვავებული
თვისება სხვადასხვა მიმართულებებისთვის.

მაგალითად, თუ მინდა, რომ

გამოვიყენო ჩამოსაცურებელი y მიმართულებით
ანუ ზევით და ქვევით.

უნდა დავწეროთ: overflow-y: auto;

მაგრამ თუ გვინდა დალაგება
x მიმართულებით, შეგვიძლია

დავწეროთ: overflow-x: hidden;

ფრთხილად იყავით, როდესაც იყენებთ
გადაღვრას, რადგანაც

ჩამოსაცურებელმა, შეიძლება გააღიზიანოს
მომხმარებელი.

განსაკუთრებით, ჩამოსაცურებელი
ჩამოსაცურებელში.

ასეთ შემთხვევებს მოერიდეთ.

დავუბრუნდეს სიგრძე-სიგანეს,
ჩვენ შეგვიძლია გამოვიყენოთ

სიგრძე და სიგანე მრავალი სახის
ელემენტისთვის, მაგალითად სურათებისთვის.

ახლა, როდესაც ვიცნობთ CSS-ს შეგვიძლია
გამოვიყენოთ სიგრძე-სიგანის CSS თვისებები

სიგრძე-სიგანის ატრიბუტების მაგივრად.

მოდი, გავზარდოთ კატის სურათი
და დავარქვათ მას "cute-cat",

წავშალოთ ატრიბუტი,

და დავუბრუნდეთ ჩვენს სტილის წესს,
მივუთითოთ

#cute-cat {width: 120px;
}

ატრიბუტების მსგავსად

ჯობია მივუთითოთ მხოლოდ სიგრძე
ან მხოლოდ სიგანე,

მიეცით ბრაუზერს საშუალება, რომ
თვითონ განსაზღვროს მეორე განზომილება.

სხვა შემთხვევაში გაჭყლეტილ კატას მივიღებთ!

საინტერესოდ ჟღერს, მაგრამ მოდი ვცადოთ

height: 40px;
(სიმაღლე - 40 პიქსელი)

ჰაჰა, გაჭყლეტილი კატა - ვაშა!

მოდი, პასუხისმგებლობის მქონე
ვებ დეველოპერი ვიქნები და ამას წავშლი.

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

რადგან შეგიძლია ჩამოსაცურებლების დამატება
და კატების გაჭყლეტვა, არ ნიშნავს რომ

ასე უნდა მოიქცე.

იმიტომ, რომ ძირითადად ვაკეთებთ
ვებ გვერდებს სხვა ადამიანებისთვის.

რაც შენთვის სახალისოა, შეიძლება
სხვისთვის რთულად გამოსაყენებელი იყოს.

მაგრამ თუ გაერთობით Khan Academy-ზე
წინააღმდეგი არ ვარ.