ელემენტის სიმაღლე და სიგანეარის გამოთვლილი ღირებულებები. ვებ გვერდის თითოეული ელემენტი ქმნის მართკუთხა არეს, რომელიც თავის მხრივ შედგება რამდენიმე უბნისგან - შინაარსის არე (შინაარსი), შევსების ადგილები, ჩარჩოს არეებიდა საველე ტერიტორიებიელემენტი.

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

ბრინჯი 1. ელემენტის ბლოკის მოდელი

1. ელემენტის სიმაღლე

სიმაღლის თვისება ადგენს ბლოკის ელემენტის შინაარსის სიმაღლეს და არ ახდენს გავლენას შიდა ელემენტების ჩვენებაზე: inline; ... შიდა ელემენტების სიმაღლე უდრის მათი შინაარსის სიმაღლეს. ნეგატიური მნიშვნელობები დაუშვებელია. ქონება არ არის მემკვიდრეობით მიღებული.

Სინტაქსი

P (სიმაღლე: 100 პიქსელი;)

2. ერთეულის სიგანე

Width თვისება ადგენს ბლოკის ელემენტის შინაარსის სიგანეს და არ ახდენს გავლენას შიდა ელემენტების ჩვენებაზე: inline; ... შიდა ელემენტებს აქვთ იგივე სიგანე, როგორც მათი შინაარსი. ნეგატიური მნიშვნელობები დაუშვებელია. ქონება არ არის მემკვიდრეობით მიღებული.

Სინტაქსი

P (სიგანე: 100 პიქსელი;)

3. აბსოლუტურად განლაგებული ელემენტის სიმაღლე და სიგანე

დააყენეთ აბსოლუტურად განლაგებული ელემენტის პოზიციის სიგანე და სიმაღლე: აბსოლუტური; ყოველთვის არ არის აუცილებელი, რადგან ამ შემთხვევაში სიმაღლე და სიგანე ნაგულისხმევად განისაზღვრება ელემენტის ოფსეტურით. თუ ელემენტები განსაზღვრავს საზღვრებს და მინდვრებს, ისინი ამცირებენ შინაარსის არეალის ზომას შესაბამისი მნიშვნელობებით.

Div (ფონი: # 6A7690; პოზიცია: აბსოლუტური; ზედა: 0; ქვედა: 0; მარცხნივ: 50%; მარჯვნივ: 0;) / * ამ შემთხვევაში, ელემენტის სიმაღლეა 100%, სიგანე არის მშობლის ბლოკის 50% * /
ბრინჯი 2. აბსოლუტურად განლაგებული ელემენტის სიმაღლე და სიგანე

4. ელემენტის აბზაცები

შევსების თვისების გამოყენებით, თქვენ შეგიძლიათ დააყენოთ ელემენტი ელემენტის მრავალ მხარეს ერთდროულად შემდეგი თანმიმდევრობით: თუ ელემენტს აქვს ფონი, ის ვრცელდება ბალიშზეც. ნეგატიური მნიშვნელობები დაუშვებელია. ქონება არ არის მემკვიდრეობით მიღებული.

თუ მოცემულია სამი მნიშვნელობა, მაგალითად, div (შევსება: 10px 20px 30px;), მაშინ ისინი განაწილდება შემდეგი თანმიმდევრობით: პირველი მნიშვნელობა არის ზედა საფარი, მეორე არის მარჯვენა და მარცხენა შევსება და მესამე არის ქვედა ბალიში.
თუ ორი მნიშვნელობაა მოცემული, მაგალითად div (შევსება: 10px 20px;), მაშინ პირველი დააყენებს ზედა და ქვედა ბალიშებს, მეორე - მარჯვნივ და მარცხნივ.
Div მნიშვნელობის მსგავსი (padding: 10px;) ელემენტის ყველა მხარეს დააყენებს ერთსა და იმავე ბალიშს.

Სინტაქსი

P (შევსება: 5px 10px 15px 10px;)

4.1. ელემენტის ერთი მხარის დახაზვა

ელემენტის მხოლოდ ერთ მხარეს ბალიშის დასაყენებლად, თქვენ უნდა გამოიყენოთ ერთ-ერთი საყრდენი ზედა, მარჯვენა მხარეს, ქვედა-ქვედა, მარცხენა მხარეს, მაგალითად:

P (შევსება-მარცხენა: 10px;)

5. ელემენტის ველები

ელემენტების უმეტესობა ერთმანეთისგან გამოყოფილია მინდვრებით. ზღვრის თვისება არის სტენოგრამის ფორმა ელემენტის მინდვრების დასაწერად შემდეგი თანმიმდევრობით: ზედა, მარჯვენა, ქვედა, მარცხენა... იგი გამოიყენება მაშინ, როდესაც თქვენ უნდა მიუთითოთ ზღვარი რამდენიმე მხრიდან, მაგრამ არა აუცილებლად ოთხი მხრიდან. ბლოკის ელემენტების ვერტიკალურად მიმდებარე ზღვარი ჩამონგრეულია, ხოლო ზედა და ქვედა ზღვარი არ ახდენს გავლენას შიდა ელემენტებზე. ნებადართულია ნეგატიური მნიშვნელობები. ქონება არ არის მემკვიდრეობით მიღებული.

თუ სამი მნიშვნელობა მოცემულია, მაგალითად, div (ზღვარი: 10px 20px 30px;), მაშინ ისინი განაწილდება შემდეგი თანმიმდევრობით: პირველი მნიშვნელობა არის ზედა ზღვარი, მეორე არის მარჯვენა და მარცხენა ზღვარი და მესამე არის ქვედა ზღვარი.
თუ მოცემულია ორი მნიშვნელობა, მაგალითად, div (ზღვარი: 10px 20px;), მაშინ პირველი დაადგენს ზედა და ქვედა ზღვრებს, მეორე - მარჯვნივ და მარცხნივ.
Div მნიშვნელობის მსგავსი (ზღვარი: 10px;) ელემენტის ყველა მხარეს დააყენებს ერთსა და იმავე ზღვარს.

(ზღვარი: 0 ავტო;) იმუშავებს მხოლოდ იმ შემთხვევაში, თუ ელემენტის სიგანე მკაფიოდ არის მითითებული.

ბრინჯი 3. ზღვარი: ავტო; აბსოლუტურად განლაგებული ელემენტისთვის

Სინტაქსი

Div (ზღვარი: 5px 10px 2px 5px;)

5.1 მინდვრები ელემენტის ერთ მხარეს

ზღვარი ზედა, ზღვარი მარჯვნივ, ზღვარი ქვედა, ზღვარი მარცხენა თვისებები აკონტროლებს ელემენტის თითოეულ მხარეს შესაბამის მინდვრებს, მაგალითად:

P (ზღვარი-მარცხენა: 10px;)

6. სიგანისა და სიმაღლის შეზღუდვა

CSS ასევე მხარს უჭერს რამდენიმე სხვა თვისებას, რომლებიც დაკავშირებულია ვებ გვერდის ელემენტების სიმაღლისა და სიგანის დაყენებასთან: min-height, min-width, max-height და max-width. ეს თვისებები საშუალებას გაძლევთ განსაზღვროთ მინიმალური და მაქსიმალური მნიშვნელობები ელემენტის სიგანეზე ან სიმაღლეზე, რაც აძლევს ელემენტს შესაძლებლობას შეავსოს არსებული სივრცე. თვისებები ხშირად გამოიყენება საპასუხო ვებ გვერდის დიზაინისთვის. ვრცელდება ყველა ელემენტზე, გარდა შიდა და ცხრილის ელემენტებისა. ისინი ყოველთვის იცავენ მთავარ წესს, ე.ი. მას შემდეგ, რაც ელემენტს მიენიჭება სიმაღლე ან სიგანე. არ არის მემკვიდრეობით მიღებული.

თქვენ შეგიძლიათ დააყენოთ რეგულარული ზომები საზომი ერთეულების გამოყენებით და ზომის შეზღუდვები სხვა ერთეულების გამოყენებით, მაგალითად:

Div (სიგანე: 400px; მაქსიმალური სიგანე: 50%;)

ელემენტს ექნება სიგანე 400 პიქსელი მხოლოდ იმ შემთხვევაში, თუ ეს მნიშვნელობა არ აღემატება კონტეინერის ბლოკის სიგანის 50% -ს, წინააღმდეგ შემთხვევაში მისი სიგანე შემცირდება.

ამ სტატიაში ჩვენ გადავხედავთ, თუ როგორ შეგიძლიათ დააყენოთ ბლოკის სიმაღლე CSS- ში მისი სიგანის პროცენტულად. მოდით შევხედოთ ამ ტექნოლოგიის გამოყენებას Bootstrap კარუსელის (სლაიდერი) შექმნის მაგალითზე სხვადასხვა ზომის სურათებიდან.

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

1. შექმენით HTML სტრუქტურა 2 ბლოკიდან:
   პირველ ბლოკს აქვს 2 კლასი. ელემენტზე რეაგირების კლასის გამოყენებით, ჩვენ დავაყენებთ ბლოკის ფარდობით პოზიციონირებას. ეს უნდა გაკეთდეს ისე, რომ 2 ბლოკი (რომელსაც ექნება აბსოლუტური პოზიციონირება) მდებარეობდეს მასთან შედარებით. გარდა ამისა, ეს კლასი ასევე გამოიყენება დასამატებლად: ფსევდოელემენტის წინ შესაბამისი ელემენტების შინაარსამდე (პუნქტი-რეაგირებადი). ეს ელემენტი დააყენებს ყუთის სასურველ სიმაღლეს სიგანესთან შედარებით padding-top CSS თვისების გამოყენებით. ამ მეთოდის ხრიკი ის არის, რომ თუ padding თვისება არის მითითებული არა პიქსელებში, არამედ პროცენტებში, მაშინ ის გამოითვლება ბრაუზერის მიერ მის სიგანესთან შედარებით... ამრიგად, შესაძლებელია ბლოკის მოპოვება საჭირო სიმაღლით. შემდეგი ნაბიჯი არის ბლოკ 2 -ის მიცემა აბსოლუტური პოზიციონირებისთვის და გასწორება პირველ ბლოკთან.
2. დაამატეთ შემდეგი CSS გვერდზე:. ერთეულზე რეაგირება (პოზიცია: ნათესავი; / * შედარებითი პოზიციონირება * /). ერთეულზე რეაგირება: ადრე (ჩვენება: ბლოკი; / * ელემენტის ბლოკად გადაცემა * / შინაარსი: ""; / * შინაარსი ფსევდოელემენტი * / სიგანე: 100%; / * ელემენტის სიგანე * /) .item-16by9 (padding-top: 56.25%; / * (9:16) * 100% * /). ერთეულზე რეაგირება> . შინაარსი (პოზიცია: აბსოლუტური; / * ელემენტის აბსოლუტური პოზიცია * / / * ელემენტის პოზიცია * / ზედა: 0; მარცხენა: 0; მარჯვნივ: 0; ქვედა: 0;) / * საჭიროების შემთხვევაში (ამ ბლოკებისთვის კლასები) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /) .item-2by1 (padding-top: 50%; / * (1: 2) * 100 % * /) .item -1by1 (padding -top: 100%; / * (1: 1) * 100% * /)

ზემოაღნიშნული ტექნოლოგიის გამოყენება Bootstrap კარუსელის შესაქმნელად

თუ თქვენ არ იცნობთ Bootstrap– ს და გსურთ იცოდეთ რა არის ეს, შეგიძლიათ ნახოთ ჩვენი შესავალი Bootstrap– ში.

მოდით შევხედოთ მაგალითს, სადაც ზემოთ მოყვანილი HTML სტრუქტურა და CSS კოდი გამოყენებული იქნება Bootstrap კარუსელის სლაიდების საჩვენებლად.

ჩვენ გამოვიყენებთ შემდეგ ფაილებს, როგორც სურათებს:

• carousel_1.jpg (სიგანე = 736px, სიმაღლე = 552px, ასპექტის თანაფარდობა (სიმაღლე სიგანე) = 1.33);
• carousel_2.jpg (სიგანე = 1155px, სიმაღლე = 1280px, ასპექტის თანაფარდობა (სიმაღლე სიგანე) = 0.9);
• carousel_3.jpg (სიგანე = 1846px, სიმაღლე = 1028px, ასპექტის თანაფარდობა (სიმაღლე სიგანე) = 1.8);
• carousel_4.jpg (სიგანე = 1140px, სიმაღლე = 550px, ასპექტის თანაფარდობა (სიმაღლე სიგანე) = 2.07);
• carousel_5.jpg (სიგანე = 800px, სიმაღლე = 600px, ასპექტის თანაფარდობა (სიმაღლე სიგანე) = 1.33);

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

კარუსელის HTML მარკირება:

კარუსელის CSS კოდი:

ერთეულზე რეაგირება (პოზიცია: ნათესავი; / * შედარებითი პოზიციონირება * /). ერთეულზე რეაგირება: ადრე (ჩვენება: ბლოკი; / * ელემენტის გადაცემა ბლოკად * / შინაარსი: ""; / * ფსევდოელემენტის შინაარსი * / სიგანე: 100 %; / * ელემენტის სიგანე * /) .tim-16by9 (padding-top: 56.25%; / * (9:16) * 100% * /). ერთეულზე რეაგირება>. შინაარსი (პოზიცია: აბსოლუტური; / * აბსოლუტური პოზიცია ელემენტის * / / * ელემენტის პოზიცია * / ზედა: 0; მარცხნივ: 0; მარჯვნივ: 0; ქვედა: 0; ფონის ზომა: ყდა! მნიშვნელოვანია;)

სტანდარტულად, ბლოკის ელემენტებისთვის გამოიყენება autowidth. ეს ნიშნავს, რომ ელემენტი ჰორიზონტალურად იქნება გადაჭიმული ზუსტად იმდენი, რამდენიც არის თავისუფალი ადგილი. ბლოკის ელემენტების ნაგულისხმევი სიმაღლე დაყენებულია ავტომატურად, ე.ი. ბრაუზერი გადაჭიმავს შინაარსის არეალს ვერტიკალურად რომ აჩვენოს მთელი შინაარსი. ელემენტის შინაარსის არეზე მორგებული ზომების დასაყენებლად შეგიძლიათ გამოიყენოთ სიგანისა და სიმაღლის თვისებები.

სიგანე CSS თვისება გაძლევთ საშუალებას დააყენოთ ელემენტის შინაარსის ფართობის სიგანე, ხოლო სიმაღლის თვისება შინაარსის ფართობის სიმაღლე:

გაითვალისწინეთ, რომ სიგანისა და სიმაღლის თვისებები განსაზღვრავს მხოლოდ შინაარსის არეალს; ბლოკის ელემენტის მთლიანი სიგანის გამოსათვლელად, დაამატეთ შინაარსის ფართობის სიგანე, მარცხენა და მარჯვენა ბალიშები და მარცხენა და მარჯვენა საზღვრის სიგანე. იგივე ეხება ელემენტის საერთო სიმაღლეს, მხოლოდ ყველა მნიშვნელობა გამოითვლება ვერტიკალურად:

ამ აბზაცისთვის ჩვენ მხოლოდ სიგანეს და სიმაღლეს დავაყენებთ.

ეს პარაგრაფი სიგანისა და სიმაღლის გარდა შეიცავს ბალიშს, საზღვარს და ბალიშს.

სცადე "

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

Მთლიანი სიმაღლე:	5 პიქსელი	+	10 პიქსელი	+	100 პიქსელი	+	10 პიქსელი	+	5 პიქსელი	= 130 პიქსელი
	ზედა ჩარჩო		ზედა შეყვანა		სიმაღლე		ქვედა შეყვანა		ქვედა ჩარჩო

ანუ 180x130 პიქსელი.

ელემენტების გადაჭარბება

მას შემდეგ რაც განსაზღვრეთ ელემენტის სიგანე და სიმაღლე, ღირს ყურადღება მიაქციოთ ერთ მნიშვნელოვან პუნქტს - ელემენტის შიგნით მდებარე შინაარსი შეიძლება აღემატებოდეს ბლოკის მითითებულ ზომას. ამ შემთხვევაში, ზოგიერთი შინაარსი სცილდება ელემენტის საზღვრებს, რათა თავიდან აიცილოთ ეს უსიამოვნო მომენტი, შეგიძლიათ გამოიყენოთ CSS გადავსების თვისება. გადავსების თვისება ეუბნება ბრაუზერს რა უნდა გააკეთოს, თუ ბლოკის შინაარსი აღემატება მის ზომას. ამ თვისებას შეუძლია მიიღოს ოთხი მნიშვნელობიდან ერთი:

• ხილული არის ბრაუზერის მიერ გამოყენებული ნაგულისხმევი მნიშვნელობა. ამ მნიშვნელობის დაყენებას ექნება იგივე ეფექტი, რაც არ აყენებს გადავსების თვისებას.
• გადახვევა - ელემენტს ამატებს ვერტიკალურ და ჰორიზონტალურ გადახვევას.
• ავტომატურად - დასძენს გადახვევის ზოლებს საჭიროებისამებრ.
• ფარული - მალავს ზოგიერთ შინაარსს, რომელიც სცილდება ბლოკის ელემენტის საზღვრებს.

აღწერა

ადგენს ბლოკის ან შესაცვლელი ელემენტების სიმაღლეს (მაგალითად, ტეგს ). სიმაღლე არ შეიცავს ელემენტის ირგვლივ არსებული საზღვრების სისქეს, საფარისა და მინდვრის მნიშვნელობას.

თუ ბლოკის შემცველობა აღემატება მითითებულ სიმაღლეს, მაშინ ელემენტის სიმაღლე უცვლელი დარჩება და შინაარსი ნაჩვენები იქნება მის თავზე. ამ მახასიათებელმა შეიძლება გამოიწვიოს ელემენტების შინაარსის გადაფარვა, როდესაც HTML კოდის ელემენტები თანმიმდევრულია. ამის თავიდან ასაცილებლად, დაამატეთ overflow: auto ელემენტის სტილს.

Სინტაქსი

სიმაღლე: მნიშვნელობა | ინტერესი | ავტო | მემკვიდრეობით

ღირებულებები

CSS– ში მიღებული სიგრძის ნებისმიერი ერთეული მიიღება მნიშვნელობებად- მაგალითად, პიქსელები (px), inches (in), რაოდენობა (pt) და ა.შ. პროცენტული აღნიშვნის გამოყენებისას, ელემენტის სიმაღლე გამოითვლება სიმაღლის მიხედვით მშობელი ელემენტის. თუ მშობელი პირდაპირ არ არის მითითებული, მაშინ ბრაუზერის ფანჯარა გამოიყენება როგორც მისი მშობელი. ავტომატურად ადგენს სიმაღლეს ელემენტის შინაარსზე დაყრდნობით

HTML5 CSS2.1 IE Cr Op Sa Fx

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 1

ბრინჯი 1. სიმაღლის თვისების გამოყენება

ობიექტის მოდელი

document.getElementById ("elementID") .style.height

ბრაუზერები

Internet Explorer 6 არასწორად განსაზღვრავს სიმაღლეს როგორც მინი-სიმაღლეს.

უცნაური რეჟიმში, Internet Explorer 8.0 -მდე ჩათვლით არასწორად ითვლის ელემენტის სიმაღლეს მასში შემავსებლის, ზღვრის და სასაზღვრო მნიშვნელობების დამატების გარეშე.

Internet Explorer 7.0 ვერსიამდე და მათ შორის არ არის მემკვიდრეობითი მნიშვნელობის მხარდაჭერა.

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

ამ ინტერაქტიული მაგალითის წყარო ინახება GitHub საცავში. თუ გსურთ თქვენი წვლილი შეიტანოთ ინტერაქტიული მაგალითების პროექტში, გთხოვთ კლონიდეთ https://github.com/mdn/interactive-examples და გამოგვიგზავნეთ გაყვანის მოთხოვნა.

მინიმალური სიმაღლის და მაქსიმალური სიმაღლის თვისებები გადალახავს სიმაღლეს.

Სინტაქსი

/ * საკვანძო სიტყვის მნიშვნელობა * / სიმაღლე: ავტო; / * ღირებულებები* / სიმაღლე: 120px; სიმაღლე: 10em; / * ღირებულება * / სიმაღლე: 75%; / * გლობალური ღირებულებები * / სიმაღლე: მემკვიდრეობით; სიმაღლე: საწყისი; სიმაღლე: განუსაზღვრელი;

ღირებულებები

CSS მონაცემთა ტიპი წარმოადგენს მანძილის მნიშვნელობას. სიგრძე შეიძლება გამოყენებულ იქნას მრავალრიცხოვან CSS თვისებებში, როგორიცაა სიგანე, სიმაღლე, ზღვარი, შევსება, საზღვრის სიგანე, შრიფტის ზომა და ტექსტის ჩრდილი. "> განსაზღვრავს სიმაღლეს, როგორც აბსოლუტურ მნიშვნელობას. CSS მონაცემთა ტიპი წარმოადგენს პროცენტულ მნიშვნელობას. ის ხშირად გამოიყენება ზომის განსაზღვრისათვის, როგორც ელემენტის მშობელი ობიექტი. მრავალ თვისებას შეუძლია გამოიყენოს პროცენტები, როგორიცაა სიგანის სიმაღლის ზღვარი და შრიფტის ზომა.> განსაზღვრავს სიმაღლეს, როგორც პროცენტული შემცველი ბლოკის სიმაღლის. ავტომატური ბრაუზერი გამოთვლის და შეარჩევს სიმაღლეს მითითებული ელემენტისთვის. მაქსიმალური შინაარსი შინაგანი სასურველი სიმაღლე. ტიპი წარმოადგენს მნიშვნელობას, რომელიც შეიძლება იყოს ან ან ა ."> ) იყენებს მორგებული შინაარსის ფორმულას, სადაც არსებული სივრცე იცვლება მითითებული არგუმენტით, ე.ი. წთ. (მაქსიმ. შინაარსი, მაქს.

ფორმალური სინტაქსი

CSS მონაცემთა ტიპი წარმოადგენს პროცენტულ მნიშვნელობას. ის ხშირად გამოიყენება ზომის განსაზღვრისათვის, როგორც ელემენტის მშობელი ობიექტი. მრავალ თვისებას შეუძლია გამოიყენოს პროცენტები, როგორიცაა სიგანის სიმაღლის ზღვარი და შრიფტის ზომა.> border-box content-box ხელმისაწვდომია min-content max-content fit-content auto

მაგალითი

Html

მე ვარ 50 პიქსელი სიმაღლე.

მე ვარ 25 პიქსელის სიმაღლე.

მე ჩემი მშობლის სიმაღლის ნახევარი ვარ.

CSS

div (სიგანე: 250px; ზღვარი-ქვედა: 5px; საზღვარი: 2px მყარი ლურჯი;) #მაღალი (სიმაღლე: 50px;) #მოკლე (სიმაღლე: 25px;) #მშობელი (სიმაღლე: 100px;) #ბავშვი (სიმაღლე: 50% სიგანე: 75%;)

შედეგი

ხელმისაწვდომობის საკითხები

დარწმუნდით, რომ სიმაღლეზე დაყენებული ელემენტები არ არის მოწყვეტილი და / ან არ ფარავს სხვა შინაარსს, როდესაც გვერდი მასშტაბირებულია ტექსტის ზომის გასაზრდელად.

სპეციფიკაციები

სპეციფიკაცია	სტატუსი	კომენტარი
CSS შინაგანი და გარეგანი ზომის მოდული დონე 4	რედაქტორის პროექტი
CSS შინაგანი და გარეგანი ზომის მოდული დონე 3 "სიმაღლის" განმარტება ამ სპეციფიკაციაში.	სამუშაო პროექტი	დაემატა მაქსიმალური შინაარსის, მინი შინაარსის, მორგებული შინაარსის საკვანძო სიტყვები.
CSS გადასვლები "სიმაღლის" განმარტება ამ სპეციფიკაციაში.	სამუშაო პროექტი	ჩამოთვლის სიმაღლეს, როგორც ანიმაციური.
CSS დონე 2 (გადახედვა 1) "სიმაღლის" განმარტება ამ სპეციფიკაციაში.	რეკომენდაცია	დასძენს მხარდაჭერას CSS მონაცემთა ტიპის წარმოადგენს მანძილი მნიშვნელობა. სიგრძე შეიძლება გამოყენებულ იქნას მრავალრიცხოვან CSS თვისებებში, როგორიცაა სიგანე, სიმაღლე, ზღვარი, შევსება, საზღვრის სიგანე, შრიფტის ზომა და ტექსტის ჩრდილი. "> ღირებულებები და ზუსტი რომელ ელემენტს ეხება იგი.
CSS დონე 1 "სიმაღლის" განმარტება ამ სპეციფიკაციაში.	რეკომენდაცია	საწყისი განმარტება.

Საწყისი ღირებულება	ავტო
Ვრცელდება	ყველა ელემენტი, მაგრამ შეუცვლელი შინაგანი ელემენტები, ცხრილის სვეტები და სვეტების ჯგუფები
Მემკვიდრეობით მიღებული	არა
პროცენტები	პროცენტი გამოითვლება გენერირებული ყუთის შემცველი ბლოკის სიმაღლეზე. თუ შემცველი ბლოკის სიმაღლე არ არის მკაფიოდ განსაზღვრული (ანუ, ეს დამოკიდებულია შინაარსის სიმაღლეზე) და ეს ელემენტი არ არის აბსოლუტურად განლაგებული, მნიშვნელობა გამოითვლება ავტომატური. ძირეული ელემენტის პროცენტული სიმაღლე შეფარდება საწყის შემცველ ბლოკთან.
მედია	ვიზუალური
გამოთვლილი ღირებულება	პროცენტი ან ავტომატი ან აბსოლუტური სიგრძე
ანიმაციის ტიპი	CSS მონაცემთა ტიპი ინტერპოლირებულია როგორც რეალური მცურავი წერტილების რიცხვები. "> სიგრძე, CSS მონაცემთა ტიპი ინტერპოლირებულია როგორც რეალური, მცურავი წერტილების ნომრები."> პროცენტი ან კალკი ();
კანონიკური წესრიგი	ფორმალური გრამატიკით განსაზღვრული უნიკალური არაორაზროვანი წესრიგი

ბრაუზერის თავსებადობა

ამ გვერდზე თავსებადობის ცხრილი გენერირდება სტრუქტურირებული მონაცემებისგან. თუ გსურთ წვლილის შეტანა მონაცემებში, გთხოვთ გადაამოწმოთ https://github.com/mdn/browser-compat-data და გამოგვიგზავნოთ გაყვანის მოთხოვნა.

განაახლეთ თავსებადობის მონაცემები GitHub– ზე

	სამუშაო მაგიდა						მობილური
	Chrome	ზღვარი	Firefox	Internet Explorer	ოპერა	საფარი	Android ვებ ხედი	Chrome Android- ისთვის	Firefox Android- ისთვის	ოპერა Android- ისთვის	Safari iOS- ზე	სამსუნგის ინტერნეტი
სიმაღლე	Chrome სრული მხარდაჭერა 1	Edge სრული მხარდაჭერა 12	Firefox– ის სრული მხარდაჭერა 1	ანუ სრული მხარდაჭერა 4	ოპერის სრული მხარდაჭერა 7	Safari სრული მხარდაჭერა 1	WebView Android სრული მხარდაჭერა 1	Chrome Android სრული მხარდაჭერა 18	Firefox Android სრული მხარდაჭერა 4	Opera Android სრული მხარდაჭერა 10.1	Safari iOS სრული მხარდაჭერა 1	Samsung ინტერნეტ Android სრული მხარდაჭერა 1.0
მორგებული შინაარსი	Chrome სრული მხარდაჭერა 46	Edge მხარდაჭერა არა	Firefox მხარდაჭერა არა	IE არანაირი მხარდაჭერა არა	ოპერის სრული მხარდაჭერა 33	Safari სრული მხარდაჭერა 11 სრული მხარდაჭერა 11 სრული მხარდაჭერა 9 პრეფიქსი პრეფიქსი				ოპერა Android?	Safari iOS სრული მხარდაჭერა 11 სრული მხარდაჭერა 11 სრული მხარდაჭერა 9 პრეფიქსი პრეფიქსი განხორციელებულია გამყიდველის პრეფიქსით: -webkit-
მაქსიმალური შინაარსი	Chrome სრული მხარდაჭერა 46	Edge მხარდაჭერა არა	პრეფიქსი პრეფიქსი	IE არანაირი მხარდაჭერა არა	ოპერის სრული მხარდაჭერა 44	Safari სრული მხარდაჭერა 11	WebView Android სრული მხარდაჭერა 46	Chrome Android სრული მხარდაჭერა 46	პრეფიქსი პრეფიქსი შესრულებულია გამყიდველის პრეფიქსით: -moz-			Samsung ინტერნეტ Android სრული მხარდაჭერა 5.0
მინ-შინაარსი	Chrome სრული მხარდაჭერა 46	Edge მხარდაჭერა არა	Firefox სრული მხარდაჭერა 66 სრული მხარდაჭერა 66 სრული მხარდაჭერა 3 პრეფიქსი პრეფიქსი შესრულებულია გამყიდველის პრეფიქსით: -moz-	IE არანაირი მხარდაჭერა არა	ოპერის სრული მხარდაჭერა 44	Safari სრული მხარდაჭერა 11	WebView Android სრული მხარდაჭერა 46	Chrome Android სრული მხარდაჭერა 46	Firefox Android სრული მხარდაჭერა 66 სრული მხარდაჭერა 66 სრული მხარდაჭერა 4 პრეფიქსი პრეფიქსი შესრულებულია გამყიდველის პრეფიქსით: -moz-	Opera Android სრული მხარდაჭერა 43	Safari iOS სრული მხარდაჭერა 11	Samsung ინტერნეტ Android სრული მხარდაჭერა 5.0
გაჭიმვა	Chrome სრული მხარდაჭერა 28 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი სრული მხარდაჭერა 28 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი	Edge მხარდაჭერა არა	Firefox მხარდაჭერა არა	IE არანაირი მხარდაჭერა არა	ოპერის სრული მხარდაჭერა 15 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი სრული მხარდაჭერა 15 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი იყენებს არასტანდარტულ სახელს: -webkit-fill-available	Safari სრული მხარდაჭერა 9 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი სრული მხარდაჭერა 9 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი იყენებს არასტანდარტულ სახელს: -webkit-fill-available	WebView Android სრული მხარდაჭერა 4.4 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი სრული მხარდაჭერა 4.4 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი იყენებს არასტანდარტულ სახელს: -webkit-fill-available	Chrome Android სრული მხარდაჭერა 28 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი სრული მხარდაჭერა 28 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი იყენებს არასტანდარტულ სახელს: -webkit-fill-available	Firefox Android მხარდაჭერა არა	ოპერა Android?	Safari iOS სრული მხარდაჭერა 9 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი სრული მხარდაჭერა 9 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი იყენებს არასტანდარტულ სახელს: -webkit-fill-available	Samsung ინტერნეტ Android სრული მხარდაჭერა 5.0 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი სრული მხარდაჭერა 5.0 Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი Webkit- შევსება-ხელმისაწვდომი"> ალტერნატიული სახელი იყენებს არასტანდარტულ სახელს: -webkit-fill-available

ლეგენდა

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