Փոխեք ներդիրը և վերևի տարածությունը CSS-ում: Վերև լիցք CSS. Div բովանդակության դիրքավորման լիցքավորման լուսանցքներ

Լուսանցքները և լիցքավորումը շատ կարևոր ոճեր են HTML էջ կառուցելիս: Նրանք թույլ են տալիս ավելի ճշգրիտ դիրքավորել տարրերը, ստեղծել անհրաժեշտ բացերով շրջանակ և այլն: Երկու ոճերն էլ շատ նման են և կատարում են նմանատիպ գործառույթներ: Բայց դեռ կան տարբերություններ։

Տարրերը կարող են լինել բույն կամ տեղակայված միմյանց կողքին: Դիտարկենք հետևյալ օրինակը.

Մենք ունենք երկու սեղան՝ կիտրոնով և կապույտով, որոնք գտնվում են մեկը մյուսի տակ: Աղյուսակները բաղկացած են մեկ բջիջից: Առաջին աղյուսակի վանդակում կարմիր բլոկ կա: Օգտվելով այս օրինակից՝ եկեք տեսնենք, թե ինչպես են աշխատում լուսանցքները և նահանջները:

Դաշտերը սահմանվում են ըստ ոճի լիցքավորում. Այս ոճը վերաբերում է միայն կոնտեյների տարրերին, որոնք կարող են պարունակել այլ տարրեր: Ոճը թույլ է տալիս սահմանել տարրի եզրերի և դրա բովանդակության միջև ընկած հատվածը: Ոճ մարժաթույլ է տալիս տարրի հետքեր դնել մեկ այլ տարրի մոտակա սահմաններին: Մեկ այլ տարրի սահմանները կարող են լինել մայր կոնտեյների սահմանները, ինչպես նաև հենց էջի եզրերը։

Այս ոճերը սահմանելու մի քանի եղանակ կա: Օրինակ, ուղղակիորեն նշեք բոլոր լուսանցքների կամ նահանջների չափը մեկ արգումենտով չափման որոշ միավորում (px, ex, em, pt, cm և այլն).

լուսանցք՝ 3px;

լիցք՝ 3px 5px;

առաջինը կորոշի վերևում և ներքևում գտնվող լուսանցքների/նեղումների քանակը, երկրորդը` ձախ և աջ: Երբ տրվում է երեք փաստարկ.

լուսանցք՝ 3px 5px 2px; առաջինը վերևի եզրագիծն է, երկրորդը և՛ ձախ, և՛ աջ, երրորդը՝ ներքևում: Չորս փաստարկներով., լիցք՝ 3px 5px 2px 6px;, լուսանցք՝ 3px 5px 2px 6px;, առաջինը վերևի եզրագիծն է, երկրորդը՝ աջ, երրորդը՝ ներքև, չորրորդը՝ ձախ: Հեշտ է հիշել՝ առաջինը վերևից է, հետո՝ ժամացույցի սլաքի ուղղությամբ: Բացի այդ, դուք կարող եք առանձին եզրեր և լցոնումներ սահմանել որոշակի եզրի համար՝ օգտագործելով համապատասխան ոճերը., padding-top, padding-աջ, լիցք-ներքև, padding-ձախլուսանցք-վերև

Նկարում կարմիր բլոկը գտնվում է աղյուսակի բջիջի ներսում և կից դրա սահմաններին, այսինքն՝ բջիջը չունի եզրեր: Եկեք սահմանենք բջիջների լուսանցքները՝ օգտագործելով ոճը.

Արդյունքում էջը կփոխվի հետևյալի.

Հիմա եկեք նայենք խորշերին: Երկու աղյուսակներ իրար կից են, եթե ուզում ենք դրանք մի փոքր իրարից հեռացնել, կարող ենք նահանջներ կիրառել։ Այստեղ կա երկու տարբերակ՝ կա՛մ սահմանել առաջին աղյուսակի ներքևի նահանջը, կա՛մ երկրորդ աղյուսակի վերին նահանջը: Եկեք օգտագործենք երկրորդը.

Խնդրում ենք նկատի ունենալ, որ մենք սահմանել ենք նահանջը հատուկ սեղանի վրա, և ոչ թե աղյուսակի բջիջի, ինչպես դա դաշտերի դեպքում է: Ահա արդյունքը.

Ի դեպ, առաջին դեպքում (կարմիր բլոկի և մայր բջիջի սահմանների միջև եղած բացը) նույն էֆեկտը կարելի էր ձեռք բերել բլոկի նահանջները դնելով: Ընդհանուր առմամբ, եթե ինչ-որ բան պարզ չէ, տեղեկացրեք մեզ մեկնաբանություններում:

Փորձնական էջի HTML կոդը.

Բարի գալուստ իմ բլոգ: Css-ը (Cascading Style Sheets) ապահովում է անհատականացման բազմաթիվ տարբերակներ տեսքըվեբ էջեր. Այսօր ես կցանկանայի համառոտ ցույց տալ, թե ինչպես կարելի է CSS-ում սահմանել լիցք վերևում կամ ցանկացած այլ կողմում ցանկացած տարրի համար:

Լուսանցք

Մարժան սահմանվում է մարժա հատկության միջոցով: Նրա օգնությամբ դուք կարող եք միանգամից բոլոր չորս կողմերին սահմանել լուսանցքներ կամ օգտագործել այլ հատկություններ՝ լուսանցք-վերև, լուսանցք-ձախ, լուսանցք-աջ, լուսանցք-ներքև, որոնք թույլ են տալիս այն դարձնել միայն մի կողմից:

Լուսանցքը որոշում է տարրի ընտրված եզրի հեռավորությունը էջի այլ տարրերից: Օրինակ՝ մուտքը.

P,div(
Լուսանցք-վերև՝ 20px;
}

Սա նշանակում է, որ բոլոր բլոկները և պարբերությունները վերևում կկտրվեն 20 պիքսելով, այսինքն՝ դրանց վերին եզրը այս հեռավորությամբ կտեղափոխվի իրեն հարող տարրերից։

Լուսանցքները կարող են գրվել յուրաքանչյուր կողմում՝ օգտագործելով միայն մեկ լուսանցքային հատկություն, որի վրա անընդմեջ գրված է 4 արժեք.

Դիվ (
Լուսանցք՝ 20px 10px 20px 10px;
}

Լիցքավորումը կտրվի համապատասխանաբար վերևից, աջից, ներքևից և ձախից: Քանի որ այս դեպքում նրանք հավասար են հակառակ կողմերին, կարող ենք գրել նաև այսպես.

Դիվ (
Լուսանցք՝ 20px 10px;
}

Առաջին արժեքը վերևում և ներքևում գտնվող լուսանցքն է, իսկ երկրորդը կողքերի լուսանցքն է:

Նահանջ

Ներքին լցոնումը տարբեր կերպ է աշխատում. այն չի հեռացնում բլոկը այլ տարրերից, այլ ավելացնում է այդ տարածությունը տարրի ներսում՝ բլոկի բովանդակությունը հեռացնելով դրա եզրերից: Հարմար է։ Որտե՞ղ եք տեսել կայք, որտեղ տեքստը սկսվում է պատուհանի վերևի ձախ մասում:

Ես դա չեմ տեսել, քանի որ վեբ ծրագրավորողները միշտ օգտագործում են արտաքին և ներքին նահանջներ՝ տեքստը հնարավորինս հեշտ ընթերցելու համար: Ներքին լիցքավորումը նշվում է՝ օգտագործելով padding հատկությունը, որում կարող են միանգամից թվարկվել 4 արժեքներ՝ բաժանված բացատով, համապատասխանաբար բոլոր եզրերի համար:

Բացի այդ, լուսանցքի նման, կարող եք ավելացնել կողմի անունը և սահմանել հեռավորությունը միայն դրա համար: Օրինակ, վերին լցոնումը կարող է գրվել՝ օգտագործելով padding-top : Ընդհանուր առմամբ, padding հատկությունը աշխատում է ճիշտ այնպես, ինչպես margin հատկությունը:

Օրինակ, կարող եք տալ այս կոդը՝

Արգելափակել (
Լայնությունը՝ 200px;
Լիցք՝ 20px;
}

Ի՞նչ եք կարծում, որքա՞ն կլինի մեր տարրի իրական լայնությունը: Այստեղ դուք կարող եք տեսնել, որ այն 200 պիքսել է, բայց բարձիկներն ավելացնում են ևս 20-ը յուրաքանչյուր կողմում, ընդհանուր առմամբ 240 պիքսել: Հաշվի առեք դա նախագծելիս:

Կցանկանայի նաև նշել, որ լիցքավորումը սովորաբար տրվում է միայն բլոկների տարրերին, ավելի լավ է այն չտալ ներկառուցված տարրերին. Լուսանցքը լավ է աշխատում ցանկացած տարրերի հետ:

Ողջույն, բլոգի կայքի սիրելի ընթերցողներ: Այսօր մենք կշարունակենք սովորել Cascading Style Sheets-ի կամ CSS-ի մասին: Նախորդ հոդվածներում մենք արդեն ընդհանուր առմամբ ուսումնասիրել ենք կայքի բլոկային դասավորությունը: Արդյունքում մենք սկսեցինք ունենալ բավականին պրոֆեսիոնալ վեբ էջեր, բայց նրանց ինչ-որ բան պակասում էր։ Բայց, ամենայն հավանականությամբ, դրանցում բացակայում են անցքերն ու շրջանակները: Այսօր մենք կանդրադառնանք լուսանցքի, լիցքավորման և եզրագծի ոճի կանոններին, որոնք թույլ են տալիս html տարրերի համար սահմանել նահանջներ և շրջանակներ:

CSS լիցքավորման ընտրանքներ

Կասկադային ոճի թերթիկների օգնությամբ հնարավոր է սահմանել երկու տեսակի ներքև.

1.Նահանջտարրի երևակայական սահմանից մինչև դրա բովանդակությունը հեռավորությունն է։ Հեռավորության արժեքը նշվում է պարամետրի միջոցով լիցքավորում. Այս նահանջը պատկանում է հենց տարրին և գտնվում է դրա ներսում։

2. Լուսանցք— վեբ էջի ընթացիկ տարրի եզրագծի և հարևան տարրերի կամ մայր տարրի սահմանների միջև հեռավորությունը: Հեռավորության չափը վերահսկվում է սեփականության կողմից մարժա. Այս նահանջը գտնվում է տարրի սահմաններից դուրս:

Պարզության համար նկար.

Օրինակ, դիտարկեք տեքստով լցված բջիջ: Այնուհետև լիցքավորումը բջջի երևակայական եզրագծի և այն պարունակվող տեքստի միջև եղած հեռավորությունն է: Իսկ արտաքին լուսանցքը հարակից բջիջների սահմանների միջև եղած հեռավորությունն է: Սկսենք նրանից լիցքավորում.

Լրացում CSS-ում՝ օգտագործելով լիցք (վերև, ներքև, ձախ, աջ)

padding-left, padding-top, padding-right և padding-bottom ոճի հատկությունները թույլ են տալիս սահմանել padding-ի արժեքները, համապատասխանաբար, վեբ էջի տարրի ձախ, վերև, աջ և ներքևի մասում.

padding-top | padding-right | լիցք-ներքև | padding-left՝ արժեքը | տոկոսներ | ժառանգել

Նեղման չափը կարող է նշվել պիքսելներով (px), տոկոսով (%) կամ CSS-ի համար ընդունելի այլ միավորներով: Տոկոսները նշելիս արժեքը հաշվարկվում է տարրի լայնությունից: Ժառանգության արժեքը ցույց է տալիս, որ այն ժառանգվել է ծնողից:

Օրինակ, ընթացիկ պարբերության համար ես կիրառել եմ ոճի կանոն, որը սահմանում է ձախ լիցքը 20 պիքսել, վերևի լցոնը՝ 5 պիքսել, աջը՝ 35 պիքսել, իսկ ներքևի լիցքը՝ 10 պիքսել: Կանոնների մուտքագրումը կունենա հետևյալ տեսքը.

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

Կոմպոզիտային լիցքավորման կանոնթույլ է տալիս միանգամից նշել վեբ էջի տարրի բոլոր կողմերում նահանջներ.

լիցք:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Prefab կանոնը թույլ է տալիս օգտագործել մեկ, երկու, երեք կամ չորս արժեք՝ բաժանված բացատով: Այս դեպքում ազդեցությունը կախված է արժեքների քանակից.

• եթե նշեք մեկ արժեք, այն կսահմանի էջի տարրի բոլոր կողմերում ներքևի չափը.
• եթե նշեք երկու արժեք, ապա առաջինը կսահմանի ներքևի հատվածի չափը վերևում և ներքևում, իսկ երկրորդը ՝ ձախ և աջ կողմում.
• եթե նշեք երեք արժեք, ապա առաջինը կորոշի ներքևի հատվածի չափը, երկրորդը `ձախ և աջ, իսկ երրորդը` ներքևում.
• եթե նշված են չորս արժեքներ, առաջինը կսահմանի ներքևի չափը վերևում, երկրորդը աջում, երրորդը ներքևում, իսկ չորրորդը ձախում:

Այսպիսով, վերը նշված CSS կանոնը կարող է հնարավորինս կրճատվել և գրվել հետևյալ կերպ.

p.test (լիցքավորում՝ 5px 35px 10px 20px)

CSS-ում մարժայի հատկությունը կամ լուսանցքները

Margin-left, margin-top, margin-right և margin-bottom ոճի ատրիբուտները թույլ են տալիս սահմանել լուսանցքի արժեքները, համապատասխանաբար, ձախ, վերև, աջ և ներքև:

լուսանցք-վերև | լուսանցք-աջ | լուսանցք-ներքև | լուսանցք-ձախ:<значение>|ավտո|ժառանգել

Ինչպես նշվեց վերևում, լուսանցքը ընթացիկ տարրի սահմանից մինչև հարակից տարրի սահմանն է, կամ, եթե չկան հարևան տարրեր, մինչև մայր կոնտեյների ներքին սահմանը:

Նեղման չափը կարող է նշվել պիքսելներով (px), տոկոսով (%) կամ CSS-ի համար թույլատրված այլ միավորներով.

p(
լուսանցք-ձախ՝ 20px;
}
h1(
margin-right:15%;
}

Auto արժեքը նշանակում է, որ նահանջի չափը ավտոմատ կերպով կհաշվարկվի դիտարկիչի կողմից: Եթե ​​դուք օգտագործում եք տոկոսային նշում, ապա նահանջները հաշվարկվում են կախված նրանից մայր կոնտեյների լայնությունը. Ավելին, սա վերաբերում է ոչ միայն լուսանցք-ձախ և լուսանցք-աջ, այլ նաև լուսանցք-վերևի և լուսանցք-ներքևի դեպքում տոկոսային լուսանցքները կհաշվարկվեն կախված տարայի լայնությունից, այլ ոչ թե բարձրությունից:

Թույլատրվում է օգտագործել որպես արտաքին ներդիրների արժեքներ բացասական արժեքներ:

p(
լուսանցք-ձախ:-20px;
}

Եթե ​​դրական նահանջ արժեքներով հարակից տարրերտեղափոխվում են հեռու, այնուհետև բացասական արժեքով հարևան բլոկը կբախվի այն տարրի հետ, որի համար մենք սահմանել ենք նման բացասական օֆսեթ:

Մենք կարող ենք նաև նշել padding՝ օգտագործելով style հատկանիշը մարժա. Այն վեբ էջի տարրի բոլոր կողմերում միաժամանակ սահմանում է ներքևման արժեքները.

լուսանցք:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Մեկ, երկու, երեք կամ չորս լիցքավորման արժեքներ նշելիս այս հատկությունը ենթարկվում է նույն օրենքներին, ինչ լրացման կանոնը:

Սահմանային ընտրանքներ, օգտագործելով սահմանային հատկությունը

Շրջանակներ սահմանելիս կան երեք տեսակի պարամետրեր.

• եզրագծի լայնությունը - եզրագծի հաստությունը;
• սահման-գույն — եզրագծի գույն;
• սահմանային ոճ - գծի տեսակը, որով գծվելու է շրջանակը:

Սկսենք շրջանակի հաստության պարամետրից.

սահման-լայնություն՝ [արժեք | բարակ | միջին | հաստ] (1,4) | ժառանգել

Շրջանակի հաստությունըկարող է նշվել պիքսելներով կամ CSS-ում առկա այլ միավորներով: Բարակ, միջին և հաստ փոփոխականները սահմանում են եզրագծի հաստությունը համապատասխանաբար 2, 4 և 6 պիքսել.

եզրագիծ-լայնություն:միջին;

Ինչպես լիցքավորման և լուսանցքի հատկությունների դեպքում, եզրագծի լայնությունը պարամետրը թույլ է տալիս մեկ, երկու, երեք կամ չորս արժեքներ, այդպիսով սահմանելով եզրագծի լայնությունը բոլոր կողմերի համար միանգամից կամ յուրաքանչյուր կողմի համար առանձին.

եզրագծի լայնությունը՝ 5px 3px 5px 3px

Ընթացիկ պարբերության համար վերևի եզրագծի հաստությունը դարձրեք 1px, աջ 2px, ներքևի 3px և ձախ 4px՝ օգտագործելով կանոնը (սահմանի լայնությունը՝ 1px 2px 3px 4px;)

Օգտագործելով սահման-ձախ-լայնություն, եզր-վերև-լայնություն, եզր-աջ-լայնություն և եզր-ներքևի լայնություն ոճի հատկանիշները, կարող եք սահմանել եզրագծի ձախ, վերև, աջ և ներքևի կողմերի հաստությունը, համապատասխանաբար.

սահման-ձախ-լայնություն|սահման-վերև-լայնություն|սահման-աջ-լայնություն|սահման-ներքևի լայնություն` բարակ|միջին|հաստ|<толщина>|ժառանգել

Հաջորդ պարամետրը սահմանի գույնն է, որով կարող եք վերահսկել շրջանակի գույնը:

եզրագույն՝ [գույն | թափանցիկ] (1,4) | ժառանգել

Հատկությունը թույլ է տալիս սահմանի գույնը սահմանել տարրի բոլոր կողմերի համար միանգամից կամ միայն նշվածների համար: Որպես արժեք կարող եք օգտագործել HTML-ում ընդունված գույները նշելու մեթոդները՝ տասնվեցական կոդ, հիմնաբառեր և այլն:

p (սահմանի լայնությունը՝ 2px; եզրագծի գույնը՝ կարմիր)

transparent սահմանում է թափանցիկ եզրագծի գույնը, իսկ ժառանգությունը ժառանգում է ծնողի արժեքը: Լռելյայնորեն, եթե եզրագծի գույնը նշված չէ, կօգտագործվի այն, որն օգտագործվում է տվյալ տարրի ներսում գտնվող տառատեսակի համար:

Օգտագործելով սահման-ձախ-գույն, եզր-վերև-գույն, եզր-աջ-գույն և եզր-ներքևի գույնի ոճի ատրիբուտները, կարող եք համապատասխանաբար սահմանել եզրագծի ձախ, վերև, աջ և ներքևի կողմերի գույնը.

եզրագիծ-ձախ-գույն|սահման-վերև-գույն|սահման-աջ-գույն|սահման-ներքև-գույն` թափանցիկ|<цвет>|ժառանգել

ԵՎ վերջին պարամետրըսահմանային ոճը սահմանում է շրջանակի տեսակը:

եզրային ոճ՝ (1,4) | ժառանգել

Շրջանակի տեսակը կարող է սահմանվել տարրի բոլոր կողմերի համար միանգամից կամ միայն նշվածների համար: Դուք կարող եք օգտագործել բազմաթիվ հիմնաբառեր որպես արժեքներ: Արտաքին տեսքը կախված կլինի օգտագործվող բրաուզերից և շրջանակի հաստությունից: Իմաստը ոչ մեկըօգտագործվում է լռելյայն և չի ցուցադրում շրջանակ, և դրա հաստությունը դրված է զրոյի: Թաքնված արժեքը նույն ազդեցությունն ունի: Ստացված շրջանակը այլ արժեքների համար, կախված հաստությունից, ներկայացված է ստորև բերված աղյուսակում.

Ոճի ատրիբուտները սահման-ձախ ոճ, եզրագծ-վերև ոճ, եզրագիծ-աջ ոճ և եզրագիծ-ներքև ոճը նշում են գծերի ոճը, որոնք գծվելու են շրջանակի ձախ, վերև, աջ և ներքևի կողմերում, համապատասխանաբար:

եզրագիծ-ձախ-ոճ|սահման-վերև-ոճ|սահման-աջ-ոճ|սահման-ներքև-ոճ. չկան|թաքնված|կետերով|գծիկներով|պինդ|կրկնակի|ակոսով|սրահով|ներդիրով|սկիզբով|ժառանգել

Ինչպես լիցքավորման և լիցքավորման տարբերակների դեպքում, կան ընդհանուր սահմանային սեփականություն. Այն թույլ է տալիս միաժամանակ սահմանել եզրագծի հաստությունը, ոճը և գույնը տարրի շուրջ.

սահման՝ | ժառանգել

Արժեքները կարող են լինել ցանկացած հերթականությամբ՝ բաժանված բացատներով.

td (սահման՝ 1px պինդ դեղին)

Տարրի միայն որոշակի կողմերում սահման դնելու համար կան սահման-վերև, եզր-ներքև, եզր-ձախ, եզրագիծ-աջ հատկություններ, որոնք թույլ են տալիս պարամետրեր սահմանել վերևի, ներքևի, ձախի և ձախի համար: աջ կողմըշրջանակը

Մնում է միայն ամփոփել.

• առաջադրանքի համար լիցքավորումմենք օգտագործում ենք գույքը լիցքավորում;
• կարգավորելու համար լուսանցքներըկա մի կանոն մարժա;
• շրջանակի պարամետրերնշված են հատկանիշի միջոցով սահման.

Նշում եմ, որ այս ամենը css հատկություններըմեծացնել վեբ էջի տարրի չափը. Հետևաբար, եթե մենք փոխենք եզրագծի հաստությունը կամ վեբ էջի ձևավորումը կազմող բլոկային բեռնարկղերի լիցքավորման չափը, մենք ստիպված կլինենք համապատասխանաբար փոխել այդ բեռնարկղերի չափերը, հակառակ դեպքում դրանք կարող են տեղաշարժվել, և դիզայնը կլինի: կոտրված.

Այսքանը, կհանդիպենք հաջորդ անգամ:

Այսօր մենք ձեզ հետ մի փոքր կխոսենք դասավորության սկզբունքների մասին, մասնավորապես՝ որոշակի տարրերի համար ձեր կայքում ներքևում կազմակերպելու ուղիների մասին:

Քննարկվող տարրը, որը պետք է ներքև լինի, կարող է լինել տեքստ, պատկեր, աղյուսակ կամ որևէ այլ HTML տարր: Գլխավորը մի քանի կարևոր կանոնների պահպանումն է, որոնց մասին հիմա կպատմեմ։

Եթե ​​դուք պարզապես ստեղծում եք ձեր կայքը, ապա խորհուրդ եմ տալիս տեղադրել հետևյալ հատկությունները ձեր հիմնական ոճի ֆայլի վերևում.

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;) *:before, *:after ( -webkit-box-sizing: border-box- box-sizing: box-sizing: border-box )

Ինչո՞ւ է դա անհրաժեշտ, դուք հարցնում եք: Ձեր հարցին հստակ օրինակով եմ պատասխանում.

Ենթադրենք, դուք ունեք այսպիսի դասավորության տարր.

Ահա թե ինչպիսի տեսք կունենա տարբերակը՝ առանց վերը նկարագրված հատկությունների օգտագործման (վերևի տարր) և դրանց օգտագործման (ներքևի տարր).

Ի՞նչ կարող եք տեսնել այստեղ: Որ տարրի լայնությունը առաջին տարբերակում (առանց հատկությունների օգտագործման) ավելացված նահանջների շնորհիվ դարձել է նշվածից ավելի մեծ, ինչը դասավորության առումով այնքան էլ հարմար և ճիշտ չէ։

Հատկություններով տարբերակը շատ ավելի էսթետիկորեն հաճելի է, բայց դուք պետք է այն օգտագործեք գիտակցաբար, քանի որ երբ դրանք ավելացնում եք պատրաստի կայք, վտանգում եք ստանալ վատ դիզայն և «գլխացավանք»՝ այդ ամենը պատշաճ ձևի բերելու տեսքով: . Բոլոր այն նախագծերը, որոնք ես հնարավորություն ունեցա ղեկավարել զրոյից, զուրկ չէին այս հատկություններից:

Եվ հիմա, փաստորեն, եկեք խոսենք ձեր կայքի տարրերի համար ներքևեր կազմակերպելու տարբերակների մասին՝ տեսողական օրինակներով:

Լիցքավորում՝ օգտագործելով CSS «padding» հատկությունը

Որպեսզի հասկանաք իրերի ողջ տրամաբանությունը, եկեք որպես օրինակ վերցնենք դասավորության հետևյալ հատվածը.

ձեր սեփական ոճերով.

Test_div (լայնությունը՝ 250px; եզրագիծը՝ 1px ամուր;)

Տեսողական տարբերակն ունի հետևյալ տեսքը.

Ո՞րն է սեփականությունը» լիցքավորում«? Այն օգնում է կազմակերպել ներքին խորշումը նշված տարրերում: Եկեք մեր դասավորությանը ավելացնենք 10px ներքին լիցք.

Test_div (լայնություն՝ 250px; եզրագիծ՝ 1px ամուր; լիցք՝ 10px; // Լիցք՝ 10px)

Տեսողականորեն այն նման է հետևյալին.

Հատկության մեջ 10 թիվը նշանակում է, որ նշված տարրերի ներսում՝ դրանց չորս կողմերից յուրաքանչյուրի վրա, պետք է ավելացնել 10px լուսանցք։ Փիքսելները (px) կարող են փոխարինվել տոկոսներով կամ այլ CSS աջակցվող արժեքներով:

Երկու տարբերակ կաայն կողմերի ցուցումները, որոնցից պետք է կատարվեն խորշեր:

Առաջին- սա կողմերի հստակ ցուցումով.

padding-top՝ 10px; // 10px վերին padding-աջ՝ 10px; // 10px padding աջ padding- bottom: 10px; // Ներքին լիցք 10px ներքևի լցոնից-ձախ՝ 10px; // 10px ձախ լցոնում

Այս դեպքում յուրաքանչյուր կողմ օգտագործում է իր սեփականությունը։ ԵՎ երկրորդ:

Լիցք՝ 10px 0 0 0; // Ներքին լիցք 10px վերևում, մնացած ամեն ինչ - 0px լիցք՝ 10px 0; // Ներքին լիցք 10px վերևից և ներքևից, իսկ կողքերում՝ 0px լիցք՝ 0 10px; // Ներքին լիցք 0px վերևից և ներքևից, և 10px կողմերից

Ահա արժեքների պարզ ցուցակ, որոնցից յուրաքանչյուրը համապատասխանում է իր կողմին: Կողմերը դրված են այսպեսԱռաջին արժեքը վերևն է, երկրորդը՝ աջ, երրորդը՝ ներքև, չորրորդը՝ ձախ, այսինքն՝ ամեն ինչ ժամացույցի սլաքի ուղղությամբ է։

Եթե ​​կա երկու արժեք (վերևից և աջից), ապա դա նշանակում է, որ հայելու մեջ նույն արժեքներն իջնում ​​են ներքև և ձախ, և դա միակ ճանապարհն է: Ամեն ինչ կարծես պարզ է. Եթե ​​կողմերից մեկի համար նահանջ դնելու կարիք չկա, այս կողմի արժեքը սահմանեք «0»: Ինձ ավելի շատ դուր է գալիս այս տարբերակը, քանի որ այն ավելի կոմպակտ է, բայց իմ ջանքերում ես օգտագործել եմ առաջին տարբերակը:

Այս տեսակի նահանջը լավ է տեքստը, աղյուսակի բջիջների բովանդակությունը և այլն առանձնացնելու համար: տեքստային տեղեկատվություն. Իրենց տարրերն առանձնացնելու համար, ինչպես վերը նշված օրինակում, կա մեկ այլ հատկություն:

Մարժա՝ օգտագործելով CSS հատկությունը «margin»

Գույքի տարբերակիչ առանձնահատկությունը » մարժա«նշանակում է, որ նահանջը ավելացվում է տարրից դուրս, այսինքն՝ արտաքին։

Այստեղ կա նաև ավելացնելու երկու տարբերակ.

Առաջին- կողմի հստակ նշումով.

Լուսանցք-վերև՝ 10px; // 10px լուսանցք վերևի լուսանցքում-աջ՝ 10px; // 10px լուսանցք աջ լուսանցք-ներքևում՝ 10px; // Արտաքին լուսանցք 10px ներքևի լուսանցքից-ձախ՝ 10px; // 10px ձախ լուսանցք

Երկրորդ– արժեքների ցանկով, որոնցից յուրաքանչյուրը համապատասխանում է իր կողմին.

Լուսանցք՝ 10px 0 0 0; // Արտաքին լուսանցք 10px վերևում, մնացած ամեն ինչ - 0px լուսանցք՝ 10px 0; // Լուսանցք 10px վերևից և ներքևից, իսկ կողքերում՝ 0px լուսանցք՝ 0 10px; // Արտաքին լցոն 0px վերևից և ներքևից, և 10px կողմերից

Ես այստեղ չեմ նկարագրի կանոններով աշխատելու բոլոր նրբությունները, ամեն ինչ նույնն է, ինչ գույքի մասին »: լիցքավորում»,– գրված է նրա մասին վերևում։

Մենք օգտագործում ենք մարժա հետևյալ արժեքով.

Test_div (լայնություն՝ 250px; եզրագիծ՝ 1px ամուր; լուսանցք՝ 10px; // Լուսանցք 10px)

Տեսողականորեն այն կունենա հետևյալ տեսքը.

Ինչպես երևում է օրինակից, այս դեպքում ավելացվում է արտաքին լուսանցք՝ նշված տարրերը առանձնացնելու համար։

Կարևոր հատկությունԵթե ​​ուշադիր նայեիք արդյունքին, կարող էիք նկատել, որ տարրերի հարակից նահանջները չեն գումարվում: Այսինքն, եթե առաջին տարրը ունի 10px ներքևի լուսանցք, իսկ երկրորդ տարրը ունի նույն արժեքի վերին լուսանցք, ապա նրանց միջև ընդհանուր հեռավորությունը նույնպես կլինի 10px: Եթե ​​համապատասխանաբար 10 և 15, ապա ընդհանուրը 15 է և այլն։

Այս նահանջ տարբերակը հաճախ օգտագործվում է տեքստում, մասնավորապես՝ պարբերությունների ձևավորման մեջ, ինչպես նաև տեսանելի եզրագծեր ունեցող տարրերում:

Բայց երկու հատկություններն էլ չեն սահմանափակվում միայն այս տարրերով: Դուք ինքներդ եք ընտրում դրանց օգտագործման տարբերակները, ես պարզապես փորձեցի ձեզ ներկայացնել դրանց մասին հիմունքները։

CSS դասավորությունը միշտ եղել է ուղղանկյուն: Ցանկացած հարթ գծեր մշակողի իրավասությունն են: Ոճի կանոնները բավականաչափ հնարավորություններ են տալիս էջին հարթ ձև հաղորդելու էկրանի լուծաչափի սահմաններում: Բայց դասավորության ցանկացած տարր միշտ ուղղանկյուն է, որտեղ տեղեկատվության դասավորությունը կարգավորվում է CSS կանոններով:

Ամբողջակողմանի լցոնումը կարևոր է յուրաքանչյուր էջի տարրի համար, երբ այն բացարձակապես տեղադրված է, և CSS-ի վերին լցոնումը հատուկ սահմանված է, քանի որ այն կարևոր է տարբեր տարրերի, հատկապես ներկառուցված տարրերի համար:

Տեղադրման հիմնական կանոնները

Բլոկի տարրն ունի իր պարունակած տարրի կողմերից ներքևման կանոն (լուսանցք), ներսի տարրերի համար ներքևման կանոն (լիցք) և եզրագծի լայնություն (սահման), որը նույնպես կարող է օգտագործվել։

Առանձնահատուկ կարևորություն ունի վերևի հատվածը: Բլոկի ներսում CSS-ը կապում է լրացման կանոնները այդ բլոկի ներսում բացարձակ և համեմատաբար տեղակայված տարրերի կանոնների հետ:

Ընդհանուր պրակտիկա CSS կանոնների համար. դուք կարող եք նշել նույն լցոնումը բոլոր կողմերից՝ զույգերով վերև/ներքև և աջ/ձախ, կամ յուրաքանչյուր կողմի համար առանձին: Օրինակ՝

• լուսանցք՝ 10px;
• լիցք՝ 10px20px;
• լիցք՝ 10px20px30px40px:

Առաջին դեպքում դրված է տարրի խորացումը արտաքին տարայի կողմերից, որում այն ​​գտնվում է: Երկրորդ դեպքում վերևի և ներքևի եզրերը 10px են, ձախից և աջից՝ 20px: Երրորդ դեպքում բոլոր կողմերից նշվում է անցքերի չափը՝ վերև, աջ, ներքև և ձախ։

Այս բոլոր դեպքերում ներքևը վերին CSS-ը 10 px է:

Կանոններ, որոնք փոխում են տարրերի դիրքը

Եթե ​​դասավորության տարրը բացարձակապես տեղադրված չէ, այն տեղադրվում է էջի ձևավորման ընդհանուր կարգով:

Եթե ​​սահմանենք «sCurrInfo» տարրի վերևի CSS-ի վրա լցնելով, նպատակը կհասնի, բայց եթե li մակարդակի վրա՝ ոչ:

Այս օրինակում օգտագործելով լիցքավորման կանոնը՝ 40px; պահանջում է լայնության և բարձրության կանոնների համարժեք կրճատում 80px-ով: IN հակառակ դեպքում scCurrInfo բլոկի չափը կգերազանցի արտաքին բլոկի սահմանները:

Եթե ​​մենք scCurrInfo նկարագրությունից հանենք լրացման կանոնը, բայց այն ավելացնենք 20px արժեքով ցուցակի տարրերի ոճի նկարագրության մեջ, մենք միայն կստանանք. վերին նահանջ. CSS-ը չի կիրառի այս արժեքը այլ կողմերի համար:

Բնականաբար, նահանջի կանոնի այս օգտագործումը վերաբերում է յուրաքանչյուր li տարրի վրա:

Բովանդակության ձևաչափման ընդհանուր պրակտիկա

Որոշ ծրագրավորողներ կատարելության են հասնում՝ էջեր դնելով՝ օգտագործելով բլոկային տարրեր: Ըստ երևույթին, սա դասական պրակտիկա է՝ սկսել աղյուսակներից և ավարտել սեփական ուսումնական գործընթացը բլոկներով։

Բլոկի դասավորությանը բնորոշ ազատությունը հետաքրքրաշարժ է, և մշակողի երևակայությունը չի կարող սահմանափակվել աղյուսակի խիստ կանոններով. միայն տողեր, միայն բջիջներ, որոնք միաձուլվում են միայն հորիզոնական և ուղղահայաց: Հարաբերական գաղափարներին հատուկ բան չկա:

Մինչդեռ սեղանները, բացի ակնհայտ թերություններից, ունեն բազմաթիվ որակական առավելություններ։ Վերևում լիցք ստեղծելիս CSS-ը հաշվի է առնում ձախ, աջ մասի լցոնումը (ներքևում հատուկ պահ է): Սեղանի բջիջների կանոնները թույլ են տալիս վերահսկել ինչպես ուղղահայաց, այնպես էլ հորիզոնական հավասարեցումը: Օգտագործելով տողերի ոճերը և դրանք համատեղելով բջիջների ոճերի հետ՝ կարող եք ստեղծել բովանդակության բարդ տեսակետներ:

Էջի սովորական ներկայացումը ուղղանկյունների տեսքով ամենևին չի խանգարում, որ այն ներկայացվի աղյուսակի տեսքով։ Սրանք նույնպես ուղղանկյուններ են, բայց դրանք նաև աղյուսակային բջիջներ են, այսինքն՝ ունեն իրենց կանոնները, որոնք լրացնում են բլոկների կանոնները։

Բացարձակ դիրքավորում

Արգելափակել կանոնով ԴԻՐՔ՝ բացարձակ ; կտեղակայվի մի վայրում, որը որոշվում է իր կոորդինատներով այն բլոկի նկատմամբ, որտեղ այն գտնվում է:

CSS կանոնների բնորոշ առանձնահատկությունն այն է, որ «պրակտիկան ճշմարտության լավագույն չափանիշն է» շատ դեպքերում, հատկապես, երբ պահանջվում է բրաուզերի համատեղելիություն և դասավորությունը կատարվում է ձեռքով, նախընտրելի է կասկադային ոճի թերթիկների վրա լիարժեք ձեռնարկներ ուսումնասիրելը:

Աղյուսակների օգտագործումը հաճախ հանգեցնում է բջջային բովանդակության փոփոխության խնդիրների: Բլոկի ներսում նմանատիպ օֆսեթը միշտ չէ, որ ազդում է բոլոր տարրերի վրա: Փորձարկելով՝ կարող եք հասնել ցանկալի արդյունքի։ Չնչին խնդիր՝ ինչպես վերևի լցոնումը հեռացնելը միշտ չէ, որ աննշան լուծում է CSS-ի համար:

Որոշ դեպքերում, երբ դուք պետք է դասավորեք էջի տարրերը որոշ հայտնի կայքերի բովանդակության կառավարման համակարգի աղիքներում, դուք դեռ պետք է ուշադրություն դարձնեք ոչ միայն փորձարարական պրակտիկային, այլև ձեր գործընկերների փորձին: