CSS տուփ-մոդելը բացատրվում է օրինակներով:

Այսօր ես կցանկանայի բացատրել տուփ-մոդելը CSS- ի ֆոնային-հոլովակի և ֆոնային ծագման հատկությունների միջոցով: Որո՞նք են ֆոնային հոլովակը և ֆոնային ծագման հատկությունները: Ինչի համար են դրանք օգտագործվում և դրանցից յուրաքանչյուրի տարբերությունը:

Դե, սա մի հարց է, որը սկսվում է սկսնակների մտքով ՝ վեբ մշակողների միջանկյալ մակարդակի վրա: Նրանցից ոմանք ինչ-որ տեղ ծանոթ են դրան, իսկ մյուսները դեռ մտածում են, թե որտեղ կարող են օգտագործել այս 2 հատկությունները:

Դե, նախքան հասկանալ այս 2 հատկությունները, դուք պետք է հասկանաք CSS տուփ-մոդելը: Եկեք սկսենք դրանից:

Նախ ստեղծեք «div» և դրեք «p» պիտակը դրա մեջ այսպես,

 
 որոշ բովանդակություն այստեղ… 
 

և ապա տվեք այն որոշ ոճեր:

Ինչպես տեսնում եք, որ մենք չենք տրամադրել որևէ թռիչք կամ սահման «div» տարրին, այնպես որ «div» տարրը դեռևս չունի տուփ կամ սահմանային տուփ, և ամբողջ տուփը համարվում է բովանդակության տուփ:

Ինչպես ցույց է տրված ստորև ներկայացված այս նկարում:

Այժմ տվեք «div» - ին ՝ վերևից, ներքևից, ձախից, աջից 50px- ի մի քանի բարձիկ:

div {
 ֆոն ՝ # 666;
 լայնությունը `300px;
 բարձրությունը ՝ 250px;
 լիցք `50 հատ; // վերևից, ներքևից, ձախից, աջից բարձելը
}

Այժմ մենք ունենք 50 հատ փնջի տուփ, իսկ բովանդակության տուփը ներդիրի տուփի մեջ է, ինչպես ցույց է տրված ստորև նշված նկարում:

Հիմա եկեք հանենք լայնությունը «p» տարրից, որպեսզի այն ընդլայնվի `վերցնելով բովանդակության տուփի ամբողջ լայնությունը:

փ {
 ֆոն ՝ կարմիր;
}

Ստացված արդյունքը կարող եք տեսնել ստորև:

Հիմա ասենք, որ ֆոնի վրա նկար եք ավելացնում «div» - ին և դրա ֆոնի չափը «պարունակել», որպեսզի այն իր չափսը կարգավորի տուփի ներսում, և դուք նույնպես որոշ սահմաններ եք տալիս, քանի որ առանց սահմանի սահմանների տուփ չկա:

div {
 ֆոն. # 666 url ('https://bit.ly/2gzkSPX') ոչ կրկնել;
 ֆոնային չափս. պարունակում;
 եզրագիծ ՝ 10 հատ պինդ սև;
 լայնությունը `300px;
 բարձրությունը ՝ 250px;
 լիցք `50 հատ;
}

Այնուհետև այն նման կլինի, ինչպես ցույց է տրված ստորև ներկայացված նկարում:

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

ֆոն-ծագումը ՝ լիցք-տուփ; / * լռելյայն արժեք * /

Ասենք, որ ուզում ենք, որ պատկերն սկսվի տուփից, բայց մենք միայն ուզում ենք բացահայտել այն պատկերի մասը, որը ներկառուցված է տուփի մեջ, այնուհետև հարկավոր է բաժանարար ֆոնային-հոլովակը դնել բովանդակության տուփին:

div {
 ֆոն. # 666 url ('https://bit.ly/2gzkSPX') ոչ կրկնել;
 ֆոնային չափս. պարունակում;
 ֆոնային հոլովակ. բովանդակության տուփ;
 եզրագիծ ՝ 10 հատ պինդ սև;
 լայնությունը `300px;
 բարձրությունը ՝ 250px;
 լիցք `50 հատ;
}

Ստորև բերված պատկերում կարող եք տեսնել արդյունքները, որ տեսանելի է միայն պատկերի այն մասը, որը ներկառուցված է տուփի մեջ, բայց պատկերը սկսվում է տուփից, քանի որ դա «ֆոն-օրիգին» -ի լռելյայն արժեքն է:

Հիմա եկեք բացահայտենք նաև ֆոնային պատկերների այն մասը, որը ներկառուցված է ներդիրի տուփի մեջ, դրա համար մենք պետք է բաժանի ֆոնային հոլովակը վերադառնանք լցոնման տուփի մեջ, ինչը նախնական արժեքն էր նախքան այն փոխելը:

div {
 ֆոն. # 666 url ('https://bit.ly/2gzkSPX') ոչ կրկնել;
 ֆոնային չափս. պարունակում;
 ֆոնային հոլովակ `լիցք-տուփ;
 եզրագիծ ՝ 10 հատ պինդ սև;
 լայնությունը `300px;
 բարձրությունը ՝ 250px;
 լիցք `50 հատ;
}

Ստորև բերված արդյունքներում կարող եք տեսնել, որ այժմ տեսանելի է պատկերի այն մասը, որը ներսից ներս է մտնում տուփի տուփի մեջ, քանի որ մենք ֆոնային հոլովակը դրել ենք վերմակը:

Հիմա համոզվեք, որ մեր բաժանորդների ֆոնային պատկերն սկսվում է սահմանային տուփից, և դրա համար մենք պետք է մեր «դիվին» տրամադրենք սահմանային տուփի ֆոնին: Բայց նախ, եկեք ավելացնենք սահմանի չափը ՝ նկատելու տարբերությունը:

div {
 ֆոն. # 666 url ('https://bit.ly/2gzkSPX') ոչ կրկնել;
 ֆոնային չափս. պարունակում;
 ֆոն-ծագում. սահմանապահարան;
 ֆոնային հոլովակ `լիցք-տուփ;
 սահման `20px պինդ սև; / * Սահմանի լայնությունը այժմ 20px է * /
 լայնությունը `300px;
 բարձրությունը ՝ 250px;
 լիցք `50 հատ;
}

Ինչպես տեսնում եք ստորև նշված պատկերում, քանի որ ֆոնային պատկերն այժմ սկսվում է սահմանային պատուհանից, այդ իսկ պատճառով պատկերի մի փոքր մասը ծածկված է սև սահմանով, այսինքն ՝ պատկերի մի մասը սև սահմանի հետևում է:

Հիմա իմ տեսակետն ապացուցելու համար, որ պատկերը սկսվում է սահմանային տուփից, և այդ պատճառով պատկերի մի փոքր մասը կանգնած է սև սահմանի հետևում, եկեք սահմանին տանք որոշակի անթափանցիկություն, որպեսզի այն կարողանա մարել, և մենք կարող ենք տեսնել պատկերի այն մասը, որը սահմանի հետևում է:

div {
 ֆոն. # 666 url ('https://bit.ly/2gzkSPX') ոչ կրկնել;
 ֆոնային չափս. պարունակում;
 ֆոն-ծագում. սահմանապահարան;
 ֆոնային հոլովակ `լիցք-տուփ;
 սահման `20px պինդ rgba (0,0,0,0,5); / * օգտագործելով rgba () * /
 լայնությունը `300px;
 բարձրությունը ՝ 250px;
 լիցք `50 հատ;
}

Այստեղ դուք գնում եք, այժմ կարող եք տեսնել այն պատկերի այն մասը, որը գտնվում է սահմանի հետևում, և դա նաև ապացուցում է իմ տեսակետը, որ այժմ պատկերը սկսվում է սահմանային տուփից, քանի որ մենք ֆոնային-ծագումը սահմանում ենք սահմանագծին:

Այժմ, երբ դուք գիտեք, թե ինչ տարբերություն կա ֆոնի ծագման և ֆոնային տեսահոլովակի միջև, և գիտեք նաև CSS տուփ-մոդելի մասին, ժամանակն է, որ դուք գնաք և դրա հետ մի քանի զարմանալի իրեր կառուցեք: #Goodluck

Եթե ​​կարոտել եք վեբ հասանելիության մասին իմ նախորդ հոդվածը, ապա ահա դրա հղումը, մի մոռացեք կարդալ այն: ՍԵՂՄԵՔ ԱՅՍՏԵՂ