შეცვალეთ padding და ზედა ინტერვალი CSS-ში. ზედა padding CSS: Div შინაარსის პოზიციონირების padding მინდვრები

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

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

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

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

ამ სტილის განსაზღვრის რამდენიმე გზა არსებობს. მაგალითად, პირდაპირ მიუთითეთ ყველა მინდვრის ან შეწევის ზომა ერთი არგუმენტით გაზომვის ზოგიერთ ერთეულში (px, ex, em, pt, სმ და ასე შემდეგ):

ზღვარი: 3px;

padding: 3px 5px;

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

ზღვარი: 3px 5px 2px; პირველი არის ზღვარი/შეწევა ზედა, მეორე არის მარცხნივ და მარჯვნივ, მესამე არის ბოლოში. ოთხი არგუმენტით:, padding: 3px 5px 2px 6px;, ზღვარი: 3px 5px 2px 6px;, პირველი არის ზღვარი/ფართი ზევით, მეორე მარჯვნივ, მესამე ქვედა, მეოთხე მარცხნივ. ადვილი დასამახსოვრებელია: პირველი არის ზემოდან, შემდეგ საათის ისრის მიმართულებით. გარდა ამისა, შეგიძლიათ ცალკე დააყენოთ მინდვრები და ბალიშები კონკრეტული კიდეზე, შესაბამისი სტილის გამოყენებით:, padding-top, padding-მარჯვნივ, padding-ქვედა, padding-მარცხნივზღვარი-ზედა

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

შედეგად, გვერდი შეიცვლება შემდეგში:

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

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

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

ექსპერიმენტული გვერდის HTML კოდი:

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

ზღვარი

ზღვარი დაყენებულია margin თვისების გამოყენებით. მისი დახმარებით შეგიძლიათ დააყენოთ მინდვრები ოთხივე მხარეს ერთდროულად, ან გამოიყენოთ სხვა თვისებები: margin-top, margin-left, margin-right, margin-bottom, რაც საშუალებას გაძლევთ გააკეთოთ ის მხოლოდ ერთ მხარეს.

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

P,div(
Margin-top: 20px;
}

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

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

Div(
ზღვარი: 20px 10px 20px 10px;
}

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

Div(
ზღვარი: 20px 10px;
}

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

ჩაღრმავება

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

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

ასევე, ზღვრის მსგავსად, შეგიძლიათ დაამატოთ მხარის სახელი და დააყენოთ მანძილი მხოლოდ მისთვის. მაგალითად, ზედა padding შეიძლება დაიწეროს padding-top-ის გამოყენებით. ზოგადად, padding თვისება მუშაობს ზუსტად ისევე, როგორც margin თვისება.

მაგალითად, შეგიძლიათ მიუთითოთ კოდის ეს ნაწილი:

დაბლოკვა (
სიგანე: 200px;
padding: 20px;
}

როგორ ფიქრობთ, რა იქნება ჩვენი ელემენტის რეალური სიგანე? აქ ხედავთ, რომ ის არის 200 პიქსელი, მაგრამ ბალიშები თითოეულ მხარეს დამატებით 20 პიქსელს უმატებენ, სულ 240 პიქსელს. გაითვალისწინეთ ეს დიზაინის შექმნისას.

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

გამარჯობა, ბლოგის საიტის ძვირფასო მკითხველებო! დღეს ჩვენ გავაგრძელებთ სწავლას Cascading Style Sheets ან CSS-ის შესახებ. წინა სტატიებში ჩვენ უკვე განვიხილეთ საიტის ბლოკის განლაგება ზოგადი თვალსაზრისით. შედეგად, ჩვენ დავიწყეთ საკმაოდ პროფესიონალური ვებ გვერდების შექმნა, მაგრამ მათ რაღაც აკლდათ. მაგრამ მათ, სავარაუდოდ, არ აქვთ ჩაღრმავები და ჩარჩოები. დღეს ჩვენ განვიხილავთ ზღვრის, ბალიშის და საზღვრების სტილის წესებს, რომლებიც საშუალებას გაძლევთ დააყენოთ შეწევა და ჩარჩოები html ელემენტებისთვის.

CSS padding პარამეტრები

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

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

2. ზღვარი— მანძილი ვებგვერდის ამჟამინდელი ელემენტის საზღვარსა და მეზობელი ელემენტების საზღვრებს შორის ან დედა ელემენტს შორის. მანძილის ზომას აკონტროლებს ქონება ზღვარი. ეს ჩაღრმავება მდებარეობს ელემენტის გარეთ.

სიცხადისთვის, სურათი:

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

შევსება CSS-ში ბალიშის გამოყენებით (ზედა, ქვედა, მარცხნივ, მარჯვნივ)

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

padding-top | padding-right | padding-bottom | padding-left: მნიშვნელობა | ინტერესი | მემკვიდრეობით

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

მაგალითად, მიმდინარე აბზაცისთვის გამოვიყენე სტილის წესი, რომელიც ადგენს მარცხენა ბალიშს 20 პიქსელზე, ზედა ბალიშს 5 პიქსელზე, მარჯვენა ბალიშს 35 პიქსელზე და ქვედა ბალიშს 10 პიქსელზე. წესის ჩანაწერი ასე გამოიყურება:

p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom: 10px
}

კომპოზიტური ბალიშის წესისაშუალებას გაძლევთ ერთდროულად მიუთითოთ შეწევა ვებ გვერდის ელემენტის ყველა მხარეს:

padding:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

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

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

p.test (შეფუთვა: 5px 35px 10px 20px)

მარჟის თვისება ან მინდვრები CSS-ში

margin-left, margin-top, margin-right და margin-bottom სტილის ატრიბუტები საშუალებას გაძლევთ დააყენოთ მარჟის მნიშვნელობები, შესაბამისად, მარცხენა, ზედა, მარჯვენა და ქვედა:

margin-top | margin-right | ზღვარი-ქვედა | ზღვარი-მარცხნივ:<значение>|ავტო|მემკვიდრეობა

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

შეწევის ოდენობა შეიძლება განისაზღვროს პიქსელებში (px), პროცენტებში (%) ან CSS-სთვის დაშვებულ სხვა ერთეულებში:

p(
ზღვარი მარცხნივ: 20 პიქსელი;
}
h1(
margin-right:15%;
}

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

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

p(
margin-left:-20px;
}

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

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

ზღვარი:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

სასაზღვრო ოფციები სასაზღვრო საკუთრების გამოყენებით

ჩარჩოების დაყენებისას არსებობს სამი სახის პარამეტრი:

• საზღვრის სიგანე - საზღვრის სისქე;
• border-color — საზღვრის ფერი;
• სასაზღვრო სტილი - ხაზის ტიპი, რომლითაც დახაზული იქნება ჩარჩო.

დავიწყოთ ჩარჩოს სისქის პარამეტრით:

საზღვრის სიგანე: [მნიშვნელობა | თხელი | საშუალო | სქელი] (1,4) | მემკვიდრეობით

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

საზღვარი-სიგანე:საშუალო;

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

საზღვრის სიგანე: 5px 3px 5px 3px

მიმდინარე აბზაცისთვის გააკეთეთ ზედა კონტურის სისქე 1px, მარჯვნივ 2px, ქვედა 3px და მარცხენა 4px წესის გამოყენებით (საზღვრის სიგანე: 1px 2px 3px 4px;)

სტილის ატრიბუტების გამოყენებით border-left-width, border-top-width, border-right-width და border-bottom-width შეგიძლიათ დააყენოთ საზღვრის მარცხენა, ზედა, მარჯვენა და ქვედა მხარეების სისქე, შესაბამისად:

საზღვარი-მარცხნივ-სიგანე|საზღვარი-ზედა-სიგანე|საზღვარი-მარჯვნივ-სიგანე|საზღვარი-ქვედა-სიგანე: წვრილი|საშუალო|სქელი|<толщина>|მემკვიდრეობით

შემდეგი პარამეტრი არის საზღვრის ფერი, რომლითაც შეგიძლიათ აკონტროლოთ ჩარჩოს ფერი:

საზღვრის ფერი: [ფერი | გამჭვირვალე] (1,4) | მემკვიდრეობით

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

p (საზღვრის სიგანე: 2 პიქსელი; საზღვრის ფერი: წითელი)

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

სტილის ატრიბუტების გამოყენებით border-left-color, border-top-color, border-right-color და border-bottom-color, შეგიძლიათ დააყენოთ საზღვრის მარცხენა, ზედა, მარჯვენა და ქვედა მხარეების ფერი, შესაბამისად:

საზღვრის-მარცხენა-ფერი|საზღვრის-ზედა-ფერი|საზღვრის-მარჯვნივ-ფერი|საზღვრის-ქვედა-ფერი: გამჭვირვალე|<цвет>|მემკვიდრეობით

და ბოლო პარამეტრი border-style განსაზღვრავს ჩარჩოს ტიპი:

სასაზღვრო სტილი: (1,4) | მემკვიდრეობით

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

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

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

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

საზღვარი: | მემკვიდრეობით

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

td (საზღვარი: 1px მყარი ყვითელი)

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

რჩება მხოლოდ შეჯამება:

• ამოცანისთვის paddingჩვენ ვიყენებთ ქონებას padding;
• კონფიგურაციისთვის მინდვრებიარსებობს წესი ზღვარი;
• ჩარჩოს პარამეტრებიმითითებულია ატრიბუტის გამოყენებით საზღვარი.

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

სულ ესაა, შემდეგ ჯერზე შევხვდებით!

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

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

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

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:წინა, *:after ( -webkit-box-sizing: border- ყუთი -moz-box-sizing: box-sizing: border-box )

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

ვთქვათ, თქვენ გაქვთ განლაგების ელემენტი, როგორიცაა:

ასე გამოიყურება ვარიანტი ზემოთ აღწერილი თვისებების გამოყენების გარეშე (ზედა ელემენტი) და მათი გამოყენებით (ქვედა ელემენტი):

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

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

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

შევსება CSS „padding“ თვისების გამოყენებით

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

საკუთარი სტილით:

Test_div (სიგანე: 250 პიქსელი; კონტური: 1 პიქსელი მყარი; )

ვიზუალური ვერსია ასე გამოიყურება:

რა არის ქონება" padding"? ეს ხელს უწყობს შიდა ჩაღრმავების ორგანიზებას მითითებულ ელემენტებში. მოდით დავამატოთ შიდა შიგთავსი 10 პიქსელით ჩვენს განლაგებაში:

Test_div (სიგანე: 250 პიქსელი; კონტური: 1 პიქსელი მყარი; შიგთავსი: 10 პიქსელი; // შიგთავსი 10 პიქსელი)

ვიზუალურად ასე გამოიყურება:

თვისებაში რიცხვი 10 ნიშნავს, რომ მითითებული ელემენტების შიგნით, მათი ოთხივე მხარეს, თქვენ უნდა დაამატოთ ზღვარი 10 პიქსელით. პიქსელები (px) შეიძლება შეიცვალოს პროცენტებით ან სხვა CSS მხარდაჭერილი მნიშვნელობებით.

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

პირველი- ეს არის მხარეთა აშკარა მითითებით:

padding-top: 10px; // 10px ზედა padding-right: 10px; // 10px padding მარჯვენა padding-bottom: 10px; // შიდა padding 10px ქვედა padding-მარცხნივ: 10px; // 10px მარცხენა ბალიშები

ამ შემთხვევაში, თითოეული მხარე იყენებს საკუთარ ქონებას. და მეორე:

ბალიშები: 10px 0 0 0; // შიდა padding 10px ზევით, ყველაფერი დანარჩენი - 0px padding: 10px 0; // შიდა padding 10px ზემოდან და ქვედაზე, ხოლო გვერდებზე - 0px padding: 0 10px; // შიდა ბალიშები 0px ზედა და ქვედა, და 10px გვერდებზე

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

თუ არსებობს ორი მნიშვნელობა (ზედა და მარჯვენა), მაშინ ეს ნიშნავს, რომ სარკეში იგივე მნიშვნელობები მიდის ქვემოთ და მარცხნივ და ეს ერთადერთი გზაა. როგორც ჩანს, ყველაფერი ნათელია. თუ არ გჭირდებათ შეწევის დაყენება ერთ-ერთ მხარეს, დააყენეთ მნიშვნელობა ამ მხარისთვის „0“-ზე. მე უფრო მომწონს ეს ვარიანტი, რადგან ის უფრო კომპაქტურია, მაგრამ ჩემს მცდელობებში გამოვიყენე პირველი ვარიანტი.

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

ზღვარი CSS თვისების „margin“ გამოყენებით

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

აქ დამატების ორი ვარიანტიც არსებობს.

პირველი- მხარის აშკარა მითითებით:

Margin-top: 10px; // 10px ზღვარი ზედა ზღვარზე-მარჯვნივ: 10px; // 10px მარჟა მარჯვენა ზღვარზე-ქვედა: 10px; // ზღვარი 10 პიქსელი ქვემოდან მარცხნივ: 10 პიქსელი; // 10 პიქსელი მარცხენა ზღვარი

მეორე– მნიშვნელობების სიით, რომელთაგან თითოეული შეესაბამება მის მხარეს:

ზღვარი: 10px 0 0 0; // გარე ზღვარი 10px ზევით, ყველაფერი დანარჩენი - 0px ზღვარი: 10px 0; // ზღვარი 10px ზემოდან და ქვედაზე, ხოლო გვერდებზე - 0px ზღვარი: 0 10px; // გარე ბალიშები 0px ზედა და ქვედა, და 10px გვერდებზე

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

ჩვენ ვიყენებთ ზღვარს შემდეგი მნიშვნელობით:

Test_div (სიგანე: 250 პიქსელი; კონტური: 1 პიქსელი მყარი; ზღვარი: 10 პიქსელი; // ზღვარი 10 პიქსელი)

ვიზუალურად ასე გამოიყურება:

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

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

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

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

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

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

პოზიციონირების ძირითადი წესები

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

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

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

• ზღვარი: 10 პიქსელი;
• padding: 10px20px;
• ბალიშები: 10px20px30px40px.

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

ყველა ამ შემთხვევაში, ჩაღრმავება ზედა CSS არის 10 პიქსელი.

წესები, რომლებიც ცვლის ელემენტების პოზიციას

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

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

ამ მაგალითში, padding წესის გამოყენებით: 40px; მოითხოვს სიგანისა და სიმაღლის წესების ადექვატურ შემცირებას 80 პიქსელით. IN წინააღმდეგ შემთხვევაში scCurrInfo ბლოკის ზომა გადააჭარბებს გარე ბლოკის საზღვრებს.

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

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

ზოგადი შინაარსის ფორმატირების პრაქტიკა

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

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

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

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

აბსოლუტური პოზიციონირება

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

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

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

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