საშუალო სიმაღლე. CSS - ბლოკის სიმაღლე უნდა იყოს რაც შეიძლება ფართო. შეიყვანეთ ელემენტის ერთი მხრიდან

css სიგანის სიმძლავრე ეხება არეალის სიგანეს ელემენტის ნაცვლად.

სიგანე: მნიშვნელობა | vіdsotki | ავტო | მემკვიდრეობით

css სიმაღლის ძალა წარმოადგენს სიმაღლის მნიშვნელობას ელემენტის ნაცვლად.

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

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

როგორც ჩანს, ამ CSS ძალებით ყველაფერი მარტივი და გასაგებია, მაგრამ სინამდვილეში ყველაფერი არც ისე მარტივია.

ვებ გვერდზე ნებისმიერი ელემენტის სიგანეზე 500 პიქსელზე დაყენებით, ეს არ ნიშნავს, რომ ამ ელემენტის რეალური სიგანე იქნება 500 პიქსელი და არა მეტი.

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

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

თქვენ შეგიძლიათ მარტივად გადალახოთ.

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

შედეგად, ვებ გვერდები იქცევა ისე, რომ წინა მხარის ბალიშის მნიშვნელობა დაემატება სიმაღლისა და სიგანის მნიშვნელობებს.

ტობტო. ელემენტის თავდაპირველი სიგანე დაემატება ელემენტის სიგანის სიმძლავრის მნიშვნელობას და მანამდე იქნება პლუს padding-left და padding-right მნიშვნელობები.

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

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

ანალოგიური სიტუაცია იქნება სიმაღლის იაკისტთან.

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

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

HTML ელემენტების უმეტესობას, როგორც წესი, ენიჭება კონკრეტული სიმაღლე და სიგანე. ამ CSS პარამეტრების დაყენება მარტივია და შედეგი პრაქტიკულია. Vykoristovuyutsya ამ მიზნით მოგცემთ ძალა სიმაღლე და სიგანე. თუმცა, ამ გაკვეთილზე ასევე ვისაუბრებთ ფანჯრის არაფიქსირებულ სიგანეზე და სიმაღლეზე, რაც დამოკიდებულია თავად ფანჯრის სიგანეზე. Დავიწყოთ)

სიგანე

ეს ძალა ადგენს HTML ელემენტის ზუსტ სიგანეს. მნიშვნელობები შეიძლება მითითებული იყოს პიქსელებში, პიქსელებში (სხვა მნიშვნელობები მოგვიანებით განიხილება).

MyBlock (
სიგანე: 400px; /* სიგანე 400 პიქსელი */

}
ან ასობით:

MyBlockPercent50 (
სიგანე: 50%; /* სიგანე ბლოკის ან ფანჯრის სიგანის 50% (თუ არ არის ფიქსირებული სიგანის ბლოკის შუაში) */
ფერი: #f1f1f1; /* ღია ნაცრისფერი ბლოკი */
}
ცხადია, ჩვენ ამოვიღებთ ბლოკს, რომელიც შემდეგ გახდება მამის ნახევრად ფართო.

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

საპასუხო დიზაინის კონდახი. გაოცდით ფანჯრის ჩარჩოს ცვალებადობით:

რა თქმა უნდა, მე გავუსწრო საკუთარ თავს. თქვენ უნდა გესმოდეთ, რა არის ჯერ კიდევ საჭირო. გამოიყენეთ იგივე შედეგი)

როგორც უკვე მიხვდით, ამ ავტორიტეტების დახმარებით შეგიძლიათ უკეთ გაუმკლავდეთ გვერდზე არსებულ ელემენტებს კამათის გარეშე. Როგორ მუშაობს? მოდით შევხედოთ კოდს.

დაბლოკვა (
მაქსიმალური სიგანე: 800 პიქსელი;
ფონის ფერი: #f1f1f1; /* ღია ნაცრისფერი ბლოკი */
padding: 20px;
}
ამ სიმძლავრის მქონე ბლოკი 200 პიქსელის სიგანით მიიღებს იგივე მნიშვნელობას, თუ ბლოკი არ არის უფრო დიდი, მაგალითად, 1000 პიქსელი, მაშინ ჩვენ ასევე ავიღებთ მის მაქსიმალურ სიგანეს, შემდეგ 800 პიქსელს. ეს გაიზრდება მანამ, სანამ მამათა ბლოკის სიგანე არ იქნება 801 პიქსელი ან მეტი. დაე, ბლოკის ბლოკმა ყოველთვის დააყენოს მისი მაქსიმალური დასაშვები სიგანე 800 პიქსელამდე.

სიმაღლე

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

ინფორმაცია (
სიმაღლე: 200px; /* ბლოკის სიმაღლე იქნება 200 პიქსელი */
padding: 10px; /* მეორდება ბლოკის შუაში შესვლისთვის =) */
}
ლოგიკურია, რომ სიმაღლეზე შეგიძლიათ მიუთითოთ მინიმალური და მაქსიმალური სიმაღლის მნიშვნელობები ელემენტისთვის, შესაბამისად მინ-სიმაღლე და მაქსიმალური სიმაღლე.

ინფორმაცია (
მაქსიმალური სიმაღლე: 360px; /* ბლოკის მაქსიმალური სიმაღლე */
მინ-სიმაღლე: 120px; /* ბლოკის მინიმალური სიმაღლე */
}
როგორც ხედავთ, შესაძლებელია, და ყველაზე ხშირად აუცილებელია, წყვილებში გამარჯვება.
ან დააკავშიროთ მნიშვნელობები:

შინაარსი (
სიმაღლე: 100%; /* სიმაღლე ყოველთვის იქნება 100% */
სიგანე: 760px; /* და ღერძის სიგანე ფიქსირდება 760 პიქსელზე */
}
თუ საჭმელი დაგრჩათ, დაწერეთ კომენტარებში!

გმადლობთ პატივისცემისთვის! წარმატებებს გისურვებთ განლაგებაში!)

სიმაღლე: 100%

ალბათ, მოდით გავაკეთოთ ეს რაღაც უფრო მარტივი. კოლი ვიკორისტუვატი სიმაღლე: 100%? სინამდვილეში, პასუხი ხშირად ცოტა განსხვავებულად ჟღერს: „როგორ შევქმნა ის ისე, რომ ჩემმა მხარემ დაიკავოს ეკრანის მთელი სიმაღლე? აჯე მართლა?

ამ ახალ ბილიკს რომ გაჰყვეთ, გთხოვთ გაიგოთ ეს სიმაღლე: 100%ბატკოვსკის ელემენტის უძველესი სიმაღლეები. "ყველა ფანჯრის სიმაღლე" არ არის ჯადოსნური. ასე რომ, თუ გსურთ, რომ თქვენმა ელემენტმა დაიკავოს ფანჯრის სიმაღლის 100%, მაშინ დააინსტალირეთ სიმაღლე: 100%არ იქნება საკმარისი.

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

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

უფრო ბრძენი გახდა? root html ელემენტი რეალურად არ არის ყველაზე მნიშვნელოვანი ელემენტი გვერდზე - ეს არის "viewport". სიმარტივისთვის განვიხილავთ რა არის ბრაუზერის ფანჯარა. ასე რომ, თუ თქვენ დააყენეთ სიმაღლე: 100% html ელემენტზე, მაშინ იგივე შეიძლება ითქვას - გახდი იგივე სიმაღლე, როგორც ბრაუზერის ფანჯარა.

ინფორმაცია უნდა იყოს აღბეჭდილი პატარა კოდით:

Html, კორპუსი, .კონტეინერი (სიმაღლე: 100%; )
მზადაა. თუ თქვენთვის კარგია, რომ დაიკარგოთ თემაში, რადგან ხედვის პორტს იყენებთ, გირჩევთ.

რატომ არის მამის ელემენტი დაყენებული მინ-სიმაღლეზე და არა სიმაღლეზე?

ახლახან როჯერ იოჰანსონმა აღწერა პრობლემა სიმაღლე: 100%, რომელიც გამოჩნდება, თუ მამის ელემენტი არ მიუთითებს სიმაღლეზე, მაგრამ არ მიუთითებს მინ-სიმაღლეზე. სტატისტიკაში ნათქვამში არ მინდა დავიკარგო, მაგრამ პირდაპირ ლექსებზე გადავალ. თქვენ უნდა დააინსტალიროთ სიმაღლე: 1pxმამისთვის, ისე, რომ ბავშვის ელემენტი იკავებს მინ-სიმაღლეში მითითებულ მთელ სიმაღლეს.

მშობელი (მინ-სიმაღლე: 300 პიქსელი; სიმაღლე: 1 პიქსელი; /* აუცილებელია ბავშვისთვის მინიმალური სიმაღლის 100% */ .ბავშვი (სიმაღლე: 100%; )
მაგალითი jsFiddle-ზე.

ამის შესახებ დამატებითი ინფორმაციისთვის შეგიძლიათ წაიკითხოთ როჯერ იოჰანსონის სტატია.

სიგანე: 100%

ახლა მოდით გავარკვიოთ სიგანე: 100%. დამწყებთათვის, მცირე განმარტება: ძალაუფლების დამყარება სიგანე: 100%ჩვენ გვინდა, რომ ჩვენმა ელემენტმა დაიკავოს მამის ელემენტის მთელი სიგანე. ყველაფერი სტანდარტულია.

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

როგორ დავამატოთ შიგთავსი და/ან კონტური მე-3 ელემენტს სიგანე: 100%, აღარ მოთავსდება მამის სტიქიაში. ბალიშის გარეგნობის და საზღვრების და ღერძის სიგანის გამო, სახელის შინაარსი-სიგანის დამნაშავეა. ახლა კი, კეთილად, გაოცდით იმ კონდახით, რომელსაც ანდაზა აჩვენებს.

ვთქვათ, თავის სიგანე არის 25 ემ, ხოლო ბავშვის ელემენტის სიგანე 100% (თავის სიგანე) და მას ასევე აქვს ბალიშები 1 ემ (მარჯვნივ 1 ემ და მარცხნივ 1 ემ, ჯამში 2 ემ ჰორიზონტალურად) და საზღვარი ზომით 0.5em (0.5 em მარჯვნივ და 0.5 em მარცხნივ) iva, ჯამი), შედეგი არის 25em (100%) + 2em + 1em = 28em.

ამ პრობლემის დაძლევის 4 შესაძლო გზა არსებობს. პირველი და, მელოდიური, უმოკლესი გზა არის ძალაუფლების უნიკალურობა სიგანე: 100%, უფრო მეტიც, ამ სიტუაციაში ეს აბსოლუტურად გიჟურია. თუ ბავშვის ელემენტი არის ბლოკის ელემენტი, მაშინ ის ავტომატურად დაიკავებს ელემენტის მთელ სიგანეს (დაფარვისა და საზღვრების პრობლემების გარეშე). მიუხედავად იმისა, რომ ჩვენ ვმუშაობთ inline-block ელემენტთან, ჩვენ ვერ მოვაგვარებთ ამ პრობლემას ასე მარტივად.

შეგვიძლია შევცვალოთ სიგანე: 100%სტატიკური ზომამდე. ჩვენს vipad-ს აქვს 25 - (2+1) = 22em. რა თქმა უნდა, ეს ცუდი გადაწყვეტილებაა, რადგან ჩვენ უნდა გამოვთვალოთ სიგანე ხელით. მოდით ავიდეთ სხვა გზით!

მესამე გზა არის calc()-ის გამოყენება სიგანის გასაფართოებლად: სიგანე: calc (100% - 3em). ალიც არ მოერგება. უპირველეს ყოვლისა, ჩვენ კვლავ უნდა გამოვთვალოთ padding+border ზომები. წინააღმდეგ შემთხვევაში, calc() არ არის მხარდაჭერილი ბრაუზერების მიერ (არ მუშაობს IE 8, Safari 5, Opera 12 და სხვა Android ბრაუზერებში).

იდეის ნომერი ჭოტირი – ვიკორისტუვატი ვლასტივისტი box-sizing: სასაზღვრო-ყუთი. ეს ცვლის ელემენტის სიგანისა და სიმაღლის განლაგების ალგორითმს ისე, რომ მათ ჰქონდეთ ბალიშის და საზღვრების ძალა. კარგი ამბავი ის არის, რომ ყუთის ზომა კარგად არის მხარდაჭერილი ბრაუზერების მიერ (IE8+, Opera 7+). და ყველა სხვა ბრაუზერისთვის შეგიძლიათ გამოიყენოთ polyfill.

ვისნოვოკი: ნუ ვიკორი სიგანე: 100%გარეშე box-sizing: სასაზღვრო-ყუთი.

როგორ არ გავაფუჭოთ z-ინდექსით.

გვერდის ყველა ელემენტი განლაგებულია სამ სიბრტყეში: ვერტიკალური და ჰორიზონტალური ღერძი, მთავარი დამატებითი ყველა Z (სიღრმე). თავიდან ყველაფერი საკმაოდ მარტივად გამოიყურება - უფრო მაღალი z-ინდექსის ელემენტები უფრო მეტია, ვიდრე დაბალი z-ინდექსის ელემენტები. სამწუხაროდ, ყველაფერი ბევრად უფრო რთულია. მე მჯერა, რომ z-index-ს აქვს ყველაზე ძლიერი CSS ძალა მის მთელ ისტორიაში. მე ასევე მჯერა, რომ z- ინდექსთან დაკავშირებული პრობლემები ყველაზე ხშირად გვხვდება CSS-თან მუშაობისას. დარწმუნებული ვარ, ჩვენ გავანათებთ მათი უზენაესი ძალის შესაძლო გზებს.

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

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

მარტივი სიტყვებით, კონტექსტის გადაფარვა, გარკვეულწილად, არის ჯგუფი, რომელიც დაფუძნებულია ერთ HTML ელემენტზე, რომელშიც ყველა ბავშვის ელემენტს აქვს იგივე პოზიცია კონტექსტში და იგივე z-ინდექსი. ელემენტის z-ინდექსის შეცვლამ შეიძლება გამოიწვიოს სხვა ელემენტების გადაფარვა, რაც არ არის საჭირო თქვენთვის. ელემენტების მოთავსების ღერძი ერთ გადაფარვის კონტექსტში (ქვემოდან ზემოთ):

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

როცა სიტუაცია მიუღებელი ხდება

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

მარჯვნივ, თითოეულ კონტექსტის გადაფარვას აქვს მთელი თავისი Z. მაგალითად, ელემენტი A კონტექსტში 1 და ელემენტი B კონტექსტში 2 არ შეუძლიათ ურთიერთქმედება z-ინდექსის მეშვეობით. ეს ნიშნავს, რომ ელემენტი A, როგორც გადაფარვის კონტექსტის ნაწილი, რომელიც მდებარეობს გადაფარვის ზაგალის კონტექსტის ბოლოში, ვერანაირად ვერ გადაფარავს სხვა კონტექსტის B ელემენტს, რომელიც უფრო ძვირია. უფრო დიდი z-ინდექსის მნიშვნელობები.

ალე შო შე გირშე. HTML ელემენტი ქმნის გადაფარვის ძირეულ კონტექსტს. მაშინ არასტატიკურად განლაგებული ელემენტი z- ინდექსის სიმძლავრით არ არის იგივე, რაც ავტო და გადაფარვა ასევე ქმნის საკუთარ კონტექსტს. Ახალი არაფერია. მაგრამ ყველაფერი იშლება: ქმედებები, რომლებიც საერთოდ არ არის დაკავშირებული CSS ძალაუფლების დაწესების კონტექსტთან, ასევე ქმნის ახალ კონტექსტებს. მაგალითად, ძალა არის გამჭვირვალობა.

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

სამწუხაროდ, z-index-თან კანის პრობლემას აქვს საკუთარი კონტექსტი (არ არის გამიზნული), ამიტომ უნივერსალური გადაწყვეტა შეუძლებელია.

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

• z- ინდექსის დაყენებამდე ხელახლა დააკონფიგურირეთ ისე, რომ დააყენოთ პოზიციის სიმძლავრე არა სტატიკური
• არ გამოიყენოთ 5 ციფრზე მეტი z-ინდექსის მნიშვნელობისთვის, ის აბსოლუტურად უსარგებლოა; უმეტეს შემთხვევაში, z-ინდექსის მნიშვნელობა 10-ის გარშემო ნაკლებად საკმარისი იქნება
• დარწმუნდით, რომ ელემენტი, რომლის დაფარვაც გსურთ, არის გადაფარვის იმავე კონტექსტში.
• თუ ყველაფერი ისევ ისე არ მუშაობს, როგორც უნდა, იცოდეთ ტრანსფორმაციის მნიშვნელობა და მამის ელემენტების უფრო დიდი საფრთხე.

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

ბრძოლა დანგრეული წვდომის წინააღმდეგ

როგორც ირკვევა, ეს მხოლოდ ერთ-ერთი CSS ხარვეზია, რომელსაც დიდი დრო სჭირდება იმის გასარკვევად, თუ რა არის მარჯვნივ. შეგვიძლია ვთქვათ, რომ ეს მსგავსია z-index შეცდომის. თითქოს იქ არ იყოს, სადარბაზოების ნგრევა - თუ ორი ელემენტის ზედა და ქვედა შესასვლელი ერთში იშლება (ორიდან უფრო დიდი).

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

სასამართლო ელემენტები

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

• ნათელი: მარცხენა; float: მარცხენა; (სწორედ იგივე)
• ჩვენება: inline-block;

jsFiddle მაგალითი გვიჩვენებს, თუ როგორ მუშაობს გამოსწორებები.

მამა და პირველი/დარჩენილი შვილი ელემენტი

დარწმუნდით, რომ მამისა და ქალიშვილის ელემენტების ზედა შესასვლელი მაქსიმალურად იშლება. გააგრძელეთ ანალოგიურად დარჩენილი ბავშვის ელემენტი და ქვედა ჩანაწერები. ამ პრობლემის გადაჭრის რამდენიმე გზაც არსებობს. მათი უმეტესობა დევს სამშობლოს ელემენტთან, რომელიც დაემატა ერთ-ერთ შემტევ ხელისუფლებას:

• გადინება: დამალული (ან სხვაგვარად არ ჩანს)
• padding: 1px (ან სხვა მნიშვნელობები 0-ზე მეტი)
• საზღვარი: 1px მყარი გამჭვირვალე (ან ნებისმიერი სხვა საზღვარი)
• float: მარცხენა (მარჯვნივ იგივეს აკეთებს)

jsFiddle მაგალითი გვიჩვენებს, თუ როგორ მუშაობს გამოსწორებები.

ცარიელი ბლოკები

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

ბრაუზერჰაკები ტიმ პიეტრუსკის და მე

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

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

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

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

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

ეს პუნქტი უნდა დაიყოს სიგანეზე და სიმაღლეზე, შიდა გახსნაზე, ჩარჩოსა და გარე გახსნად.

Სცადე

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

ზაგალის სიმაღლე:	5 პიქსელი	+	10 პიქსელი	+	100 პიქსელი	+	10 პიქსელი	+	5 პიქსელი	= 130 პიქსელი
	ზედა ჩარჩო		ზედა წვდომა		სიმაღლე		ქვედა წვდომა		ქვედა ჩარჩო

შემდეგ 180x130 პიქსელი.

ელემენტების ჩანაცვლება

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

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

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

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

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

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

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

Სინტაქსი

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

2. ელემენტის სიგანე

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

Სინტაქსი

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

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

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

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

4. ელემენტების შესასვლელები

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

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

Სინტაქსი

P (შეფუთვა: 5px 10px 15px 10px;)

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

ელემენტის მხოლოდ ერთი მხარის გარეგნობის დასაყენებლად, თქვენ სწრაფად უნდა გამოიყენოთ ერთ-ერთი კონტროლი padding-top, padding-right, padding-bottom, padding-left, მაგალითად:

P (შეფუთვა-მარცხნივ: 10 პიქსელი;)

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

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

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

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

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

Სინტაქსი

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

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

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

P (ზღვარი მარცხნივ: 10 პიქსელი;)

6. სიგანისა და სიმაღლის გაზომვა

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

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

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

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