. Այն նման է աղյուսին շենք կառուցելիս։ Կայքի հիմքն ու դիզայնը լինելով հանդերձ, այն, սակայն, միակը չէ: Ինչպես դռները, պատուհանները, օդափոխությունը, պատշգամբները և այլն, այլ HTML տարրեր օգտագործվում են դասավորության համար: Սրանք հղումներ, ձևեր, նկարներ, ցուցակներ և աղյուսակներ են:
մեզ թույլ տվեց ծածկագիրը դարձնել ավելի կոմպակտ և պարզ: Բլոկների դասավորության անցումը հնարավորություն տվեց ազատել HTML-ն ավելորդ բաներից, մասնավորապես՝ ոճերից: Հնարավորություն տվեց ամբողջությամբ հեռացնել ծանրաբեռնված և դժվար նավարկվող աղյուսակի դասավորությունը:
Ակտիվորեն օգտագործում է CSS բլոկի դասավորությունը: Օգտագործելով առկա գործիքները, դուք կարող եք ստեղծել ցանկացած էջի դասավորություն պիքսելային ճշգրտությամբ: Այս դասավորությունը կոչվում է պիքսել կատարյալ: Դա ենթադրում է կատարյալ համընկնում կայքի և դասավորության միջև: Վերևի լուսանկարը ցույց է տալիս, որ ամեն ինչ այնքան էլ պարզ չէ բլոկի դասավորության հետ: Սկզբում ուղղակի անհնար էր անել առանց սեղանների։ Դրանք օգտագործվել են էջերի հիմնական դասավորությունը ստեղծելու համար, իսկ բլոկները՝ առանձին տարրերի համար։ Այդպես էր, մինչև նրանք սովորեցին, թե ինչպես կարելի է բլոկների բարձրությունը սահմանել:
Առավելությունները
Կայքի արգելափակման դասավորությունն ունի հետևյալ առավելությունները.
Հետագա զարգացում
Ներկայումս բլոկի div դասավորությունը հնացած է և ունի միայն սահմանափակ կիրառություն՝ միայն որպես հատուկ դեպք որոշակի իրավիճակների համար: Այն փոխարինվեց դասավորության մեջ դիրքավորմամբ և հոսքով: Նրանք շատ թերություններ ունեին, բայց ընդհանուր առմամբ թույլ էին տալիս ավելին, քան բլոկային դասավորությունը։
Հաջորդը եկավ շինարարությունը՝ օգտագործելով inline-block տարրեր: Սա մեծապես հեշտացրեց ծրագրավորողների աշխատանքը։ Այս մեթոդը օգտվում է երկու տեսակի բլոկներից և թույլ է տալիս ստեղծել ավելի արձագանքող և հարմարվողական դիզայն: Հարկ է նշել, որ այս բոլոր մեթոդներն այս կամ այն կերպ բաղկացած էին div տարրից, որը նրան տվեց «հրաշալի դասավորություն» անվանումը:
Ներկայումս էջը կառուցելու համար օգտագործվում են Flex-box և bootstrap: Նրանք զգալիորեն նվազեցնում են կոդը և ավելի արագ և հեշտացնում են բարձրորակ արձագանքող դիզայնի ստեղծումը: Նրանք թույլ են տալիս տեղափոխել բլոկներ՝ առանց ամբողջ էջը կոտրելու:
Առաջընթացի առաջնագծում նոր տեխնոլոգիան է՝ Ցանցերը: Այն թույլ է տալիս շատ արագ և հեշտությամբ ստեղծել ցանկացած բարդության դիզայն։ Իսկ բլոկները, հոսքը, դիրքավորումը, ինչպես մի ժամանակ եղավ աղյուսակների դեպքում, օգտագործվում են միայն իրենց նպատակային նպատակներով:
Div layout-ը վեբկայքի ստեղծման ընթացիկ մոդել է.
Համացանցում անընդհատ հայտնվում են նոր կայքեր՝ լրատվական պորտալներ, բլոգեր և անձնական էջեր։ Դրանցից գրեթե յուրաքանչյուրը ստեղծվել է բլոկային մոդելի հիման վրա, որի հիմքում ընկած են DIV բլոկները։ Այսօր մենք կհասկանանք այս տեխնոլոգիան, հաշվի առնենք div դասավորության հիմնական նրբությունները:
HTML Փաստաթղթերի հոսք
Եթե հիշենք, որ HTML լեզուն թույլ է տալիս կառուցվածքային հիպերտեքստային տեղեկատվությունը, պարզ է դառնում, որ ցանկացած կայք իր հիմքում բլոկների մի շարք է՝ նկարներ, տեքստ, հղումներ և այլն: Մենք այս պահին կոնկրետ DIV-ների մասին չենք խոսում, բայց դրանք սերտորեն կապված թեմաներ են:
Այսպիսով, մենք ունենք տվյալների որոշակի հոսք, որից հավաքվում է HTML էջը: Այս պահին կան երկու տեսակի կառուցվածքային տարրեր՝ բլոկ և ներդիր: Բլոկների բլոկները, սովորական HTML հոսքի մեջ, գտնվում են մեկը մյուսի հետևից՝ ուղղահայաց կարգով: Միևնույն ժամանակ, լռելյայնորեն, բլոկի լայնությունը զբաղեցնում է էջի կամ մայր տարրի համեմատ առկա ողջ տարածքը: Իր հերթին, ներդիր տարրերը դասավորված են մեկը մյուսի հետևից հորիզոնական կարգով:
Այս երկու կատեգորիաների հիմնական ներկայացուցիչներն են div և span պիտակները։
Համապատասխանաբար, եթե մենք խոսում ենք նորմալ HTML հոսքի մասին, ապա բոլոր div բլոկները կտեղակայվեն միմյանց տակ, և միջակայքը կլինի գծի մեջ:
Ինչպես հասկանում եք, դուք չեք կարողանա նորմալ նշումներ ստեղծել վեբկայքի համար՝ օգտագործելով ներկառուցված տարրեր: Հետեւաբար, մի քանի տարի առաջ, սեղանի դասավորությունը փոխարինելու համար, նրանք որոշեցին օգտագործել դասավորությունը, որը հիմնված է DIV բլոկների վրա:
DIV կայքի դասավորություն
Այսպիսով, DIV բլոկները սկսեցին օգտագործվել կայքը նշելու համար: Օգտագործելով դրանք՝ հնարավոր եղավ գծել հիմնական դասավորությունը և ստեղծել լրացուցիչ բլոկներ բոլոր անհրաժեշտ տեսակի բովանդակության համար:
Եկեք նայենք այս գործընթացին՝ օգտագործելով ստանդարտ էջի օրինակ, որը ներառում է վերնագիր, բովանդակության բլոկ, կողագոտ և ստորագիր:
Սա դասական տարբերակ է։ Լոգոն առավել հաճախ տեղադրված է կայքի վերնագրում, իսկ նավիգացիոն հղումները՝ կողային բլոկում։ Հիմնական բլոկը օգտագործվում է տեղեկատվության ցուցադրման համար՝ հոդվածներ, ընկերության նկարագրություններ, ֆոտոարխիվներ և այլն։ Ներքևի բլոկում կարող եք տեղադրել հասցե, կոնտակտներ և ծառայության այլ տեղեկություններ:
Ինչպես տեսնում եք նկարում, մենք օգտագործում ենք հետևյալ հիմնական բլոկները դասավորության դասավորության համար.
- վերնագիր
- բովանդակությունը
- ստորագիր
Հիմնական բլոկը օգտագործվում է որպես կոնտեյներ ամբողջ բովանդակության համար: Վերնագիր - կայքի վերնագիր: Nav - նավիգացիոն բլոկ: Բովանդակություն - հիմնական տեղեկատվություն և բովանդակություն: Footer - կայքի ստորագիր:
Այս բլոկներից յուրաքանչյուրը DIV կոնտեյներ է: Բայց տեսության հիման վրա բլոկները պետք է հաջորդեն միմյանց: Մենք պետք է ստանանք վերը քննարկված դասավորությունը, որպեսզի բլոկները ունենան հետևյալ կառուցվածքը.
- ՀԻՄՆԱԿԱՆ
- վերնագիր
- բովանդակությունը
- ստորագիր
Եվ գումարած, դրանք կտեղակայվեին էջում այնպես, ինչպես մենք տեսնում ենք կաղապարի վրա: Ինչպե՞ս կարող ենք դրան հասնել: Այդ նպատակով մենք կօգտագործենք հատկությունները DIV բլոկների համար, ինչը թույլ կտա մեզ տեղավորել դրանք ցանկալի ձևով՝ միմյանց նկատմամբ և էջն ամբողջությամբ:
Բայց նախ, եկեք ստեղծենք մեր դասավորության HTML հիմքը և տանք բլոկների անունները, որպեսզի կարողանանք աշխատել ոճերի թերթիկների հետ:
HTML շրջանակ
Եթե բաց թողնենք բոլոր սպասարկման պիտակները, ապա մեր կայքի կմախքը կունենա այսպիսի տեսք.
Բովանդակություն
Նավիգացիա
Յուրաքանչյուր բլոկի համար մենք նշանակված ենք դաս: Նրա օգնությամբ մենք կսահմանենք ոճեր բլոկի համար. դա կօգնի մեզ հասնել ցանկալի դիրքը էջում:
Ժամանակն է ծանոթանալ այն ոճերին և հատկություններին, որոնք օգտագործվում են կայքի div դասավորության համար:
CSS ոճեր
Եթե ինչ-որ մեկն արդեն չգիտի, CSS ոճի թերթիկները վաղուց օգտագործվել են կայքերի մշակման մեջ: Նրանց օգնությամբ դուք կարող եք փոխել էջի ցանկացած տարր։ Սա վերաբերում է ինչպես բլոկի տեսողական ձևավորմանը, այնպես էլ դրա գտնվելու վայրին և մասշտաբին:
Բոց
Նախ, եկեք տեսնենք այն հատկությունը, որը թույլ է տալիս տեղադրել DIV-ը էջի աջ կամ ձախ կողմում կամ դրա մայր կոնտեյների համեմատ:
Փոքր նահանջ. Ամեն անգամ, երբ մենք ոճը վերագրում ենք բլոկին, այն կփոխի իր հատկությունները (չափը, գտնվելու վայրը) մայր կոնտեյների համեմատ:
Float հատկությունն ունի չորս արժեք՝ none, right, left, inherit:
Մեզ հետաքրքրում է «ձախ» և «աջ» բառերի իմաստը։
float արժեքը ցույց է տալիս, թե որ կողմում կցուցադրվի մեր բլոկը: Բոլոր մյուս բլոկները դրա շուրջը կհոսեն հակառակ կողմից:
Մեր դեպքում, նավիգացիոն բլոկի համար մենք պետք է նշենք արժեքը ձախ , իսկ հիմնական բովանդակության համար արժեքը աջ: Ահա թե ինչ տեսք կունենա ոճային ֆայլում.
Nav (float:ձախ;) .content (float:աջ;)
Ի դեպ, հատկությունը կարող եք սահմանել միայն նավիգացիոն բլոկի համար։ Բովանդակության բլոկը ավտոմատ կերպով կտեղակայվի նավիգացիայի աջ կողմում: Դա ձեռք կբերվի float-ի շնորհիվ, որը ստացվում է float հատկությունը սահմանելով:
Լուսանցքները CSS-ում. լուսանցք և լիցք
Այժմ եկեք հասկանանք երկու կարևոր հատկություններ, որոնք օգտագործվում են div-ի վրա հիմնված դասավորության մեջ: Նրանք պատասխանատու են ներթափանցման համար: Նրանց աշխատանքի էությունը հասկանալու ամենահեշտ ձևը օրինակով է:
Եկեք պատկերացնենք, թե ինչ պետք է անենք, որպեսզի մեր հիմնական բլոկը MAIN-ը մի փոքր նահանջ ունենա կայքի վերնագրից: Դրան կարելի է հասնել՝ հիմնական դասի հետ div-ին հատկացնելով margin հատկություն: Այն պատասխանատու է բլոկի արտաքին լիցքավորման համար:
Margin հատկությունն ունի հետևյալ արժեքները՝ [արժեք | տոկոսներ | ավտո] (1,4) | ժառանգել.
Այսպիսով, դուք կարող եք սահմանել օֆսեթը պիքսելներով, տոկոսներով, հերթով յուրաքանչյուր կողմի համար:
Հնարավոր է սահմանել միայն որոշակի նահանջ, օրինակ՝ վերին մասում: Սա հենց մեր դեպքն է։ Ահա թե ինչպես է այն իրականացվելու.
Հիմնական (լուսանցք-վերև:10px;)
Այժմ մեր հիմնական բլոկը կունենա 10 պիքսելանոց վերին լիցք:
Հիմա եկեք նախագծենք բլոկ՝ նավիգացիայով և բովանդակությամբ: Պատկերացրեք, որ մենք արդեն ունենք պատրաստի կայք։ Նավիգացիայի բոլոր հղումները գտնվում են էջի ձախ եզրին մոտ: Իսկ բովանդակության բլոկի տեքստը, ընդհակառակը, սերտորեն հարում է աջ կողմին։ Բավականին տհաճ դիզայն։ Մենք պետք է ներքին լիցք պատրաստենք:
Դրա համար պատասխանատու է padding հատկությունը՝ ունենալով հետևյալ արժեքները՝ [արժեք | տոկոս] (1, 4) | ժառանգել
Այստեղ սկզբունքը նույնն է, ինչ մարժա հատկության դեպքում. դուք կարող եք յուրաքանչյուր կողմի համար առանձին սահմանել նահանջը:
Nav (float: ձախ; padding-left: 15px; ) .content (float:աջ; padding-աջ՝ 20px; )
Օգտագործելով այս հիմնական հատկությունները, դուք կարող եք հասնել DIV բլոկների ցանկալի դասավորությանը: Արդյունքում դուք կստանաք պատրաստի կայքի դասավորություն, և մնում է այն լրացնել անհրաժեշտ տեղեկատվությամբ։
Տեսանյութ հոդվածի համար.
Եզրակացություն
Մենք դիտարկել ենք միայն հիմնական հատկությունները: Իրականում դրանք շատ ավելին են։ Բայց ամեն դեպքում, տրամադրված տեղեկատվությունը միշտ կօգտագործվի div դասավորության մեջ:
Ինչու՞ տեղեկատվություն փնտրել այլ կայքերում, եթե ամեն ինչ հավաքված է այստեղ:
Հեղինակի հոդվածաշարը՝ նվիրված կայքի բլոկի դասավորության հիմունքները. Սա առաջին տեղն է սկսելու թեման ուսումնասիրել: կայքի ստեղծում. Դասերը օգտակար կլինեն նրանց համար, ովքեր ցանկանում են սովորել հիմունքները HTML և CSSոչ միայն տեսականորեն, այլև գործնականում։
Թեման ուսումնասիրելիս կստեղծենք կայք, սովորական կայք, առանց հատուկ զանգերի ու սուլիչների, բայց բավականին գեղեցիկ։
Դասերի ընթացքում ես պարզապես և հստակ խոսում եմ բլոկների վրա հիմնված վեբ կայքի դասավորության և այլնի մասին: Եթե ցանկանում եք արագ հասկանալ հիմունքները վեբ կայքի դասավորություններ, ապա այս հոդվածների շարքը կլինի հենց այն, ինչ ձեզ հարկավոր է:
Ի՞նչ է բլոկի դասավորությունը:
Ինչ է պատահել արգելափակել կայքի դասավորությունըիսկ դուք ինչո՞վ եք այն ուտում
Նախկինում կայքերը նախագծվում էին աղյուսակների միջոցով: Էջի յուրաքանչյուր տարր, լինի դա վերնագիր, տեքստ կամ պատկեր, գտնվում էր իր սեփական բջիջում: Այս բջիջները կուտակվել են այլ, ավելի մեծ բջիջներում, և դրանք, իրենց հերթին, ընկած են հիմնական բջիջում, այսինքն՝ հենց կայքի էջում:
Աղյուսակային դասավորությունն այժմ հնացած է, չնայած շատ վեբ վարպետներ շարունակում են օգտագործել այն: Դրա մեծ թերությունը ծանր ծածկագիրն է: Ի վերջո, յուրաքանչյուր փոքրիկ բջիջ պետք է նշանակվի որոշակի պիտակներով:
Բլոկի դասավորությունը- լրիվ ուրիշ երգ։ Այստեղ էջի բոլոր տարրերը տեղակայված են հատուկ բլոկներում, որոնք կոչվում են divs: Իրենց հիմքում նրանք որոշ չափով նման են նույն աղյուսակներին: Տուփը տուփ է նաև Աֆրիկայում: Բայց բլոկները շատ ավելի հարմար են, պարզ ու ֆունկցիոնալ:
Արգելափակելվեբ կայքի դասավորության մեջ սա կանոնավոր ուղղանկյուն տարածք է, որն ունի մի շարք հատկություններ, ինչպիսիք են՝ շրջանակ, լուսանցքներ և ներքևեր: Բլոկի բովանդակությունը կարող է լինել ցանկացած բան՝ տեքստի մի հատված, նկար, ցուցակ, լրացման ձև, նավիգացիոն մենյու և այլն:
Շրջանակ- սա բլոկի ուրվագիծն է, որի համար կարող եք սահմանել այնպիսի բնութագրեր, ինչպիսիք են հաստությունը, գույնը և տեսակը (կետավոր, ամուր, կետավոր):
Դաշտեր (լիցք)- առանձնացրեք բլոկի բովանդակությունը դրա շրջանակից, որպեսզի տեքստը, օրինակ, «վերև» չմնա բլոկի պատերին:
Լուսանցքներ- սա տարբեր բլոկների միջև եղած դատարկ տարածությունն է, որը թույլ է տալիս երկու բլոկների տեղադրվել միմյանց նկատմամբ որոշակի հեռավորության վրա:
Բլոկները, ինչպես աղյուսակները, միշտ դասավորված են էջի վրա ուղղահայաց: Այսինքն, եթե էջի կոդի մեջ անընդմեջ գրված է երկու բլոկ, դրանք կցուցադրվեն բրաուզերում մեկը մյուսի տակ։ Եթե մեզ անհրաժեշտ է մի շարք բլոկներ հորիզոնական դասավորել մեկ տողում, ապա դրանց հատկություններում մենք սահմանում ենք այնպիսի պարամետր, ինչպիսին « հոսել շուրջը«(բոց): Բայց դրա մասին ավելի ուշ:
Արգելափակել կայքի դասավորությունը: Պիտակներ
Նշել HTML լեզվի հատուկ կոնստրուկցիա է։ Տարբերել բացումԵվ փակումպիտակներ. Մի շփոթեք դրանք սոցիալական ցանցերի հեշթեգերի կամ կայքերի պիտակների հետ, սրանք տարբեր բաներ են:
Ամենապարզ դեպքում պիտակը նման է մանկական շինարարական հավաքածուի մի մասի, որն ունի իր խիստ նպատակը՝ ձող նշանակում է ձող, անիվ՝ անիվ և ուրիշ ոչինչ։ Օրինակ, պարբերության պիտակ.
Պարբերության տեքստը.
միշտ նշվում է p տառով և ուրիշ ոչինչ: Դա նրա անունն է:
Թեգերը միշտ փակվում են անկյունային փակագծերում: Ինչպես տեսնում եք օրինակից, կա բացման և փակման պիտակ: Փակման պիտակի վրա անունից առաջ ավելացված է կտրվածք՝ առաջ շեղ /:
Ոչ բոլոր թեգերն ունեն փակվող զույգ: Օրինակ, img պատկերի պիտակը ընդհանրապես չունի: Սակայն ժամանակակից չափանիշներին և XHTML-ի պահանջներին համապատասխանելու համար նրանք դեռևս փակման անկյունագծից առաջ շեղով բացատ են ավելացնում: Դա նման բան է թվում.
div պիտակ
Div պիտակը բլոկի դասավորության հիմքն է: Սրանք հենց այն խորանարդներն են, որոնցից կառուցված է ամբողջ կայքը: Այս պիտակը չեզոք է: Ի տարբերություն ստանդարտ HTML թեգերի, որոնք խստորեն կապված են իրենց բովանդակության հետ (p - պարբերություններին, a - հղումներին, img - պատկերներին), div պիտակը կարող է պարունակել ցանկացած բան և այս նյութից այնքան, որքան ցանկանում եք: Համարեք այն մեծ տուփի նման, որտեղ բոլոր խաղալիքները թափված են:
Div թեգը օգտագործվում է սահմանելու համար էջի ֆունկցիոնալ տարածքները. Օրինակ՝ «վերնագիր», նավիգացիոն բլոկ, հիմնական բովանդակության բլոկ, «ստորատակ» կամ ստորագիր մեր կարծիքով:
Div թեգը, ինչպես ցանկացած այլ պիտակ, ունի իր առանձնահատկությունները:
Հատկանիշ- պիտակի նկարագրական բնութագրերը. Այսինքն՝ ինչ կարող է անել և ինչպես։ Օրինակ, եկեք վերցնենք պատկերի պիտակ.
Այս դեպքում src, width, height, alt պիտակի ատրիբուտներ են: Չակերտների մեջ (և սա նաև ժամանակակից ստանդարտների պարտադիր պահանջն է): արժեքներհատկանիշները.
Դժվար չէ վերծանել նման ձայնագրությունը։ Թեգը ցույց է տալիս, որ էջի այս տեղում պետք է պատկերների թղթապանակից կցել risunok.jpg պատկերը։ Պատկերի լայնությունը 200 պիքսել է, բարձրությունը՝ 50 պիքսել։ Իսկ կույտին ավելացվել է այլընտրանքային տեքստ, որը բացատրում է նկարում պատկերվածը։
Ի դեպ, այլընտրանքային տեքստը քմահաճույք չէ, այլ նաև անհրաժեշտ պահանջ։ Ոչ բոլոր ցանցային օգտվողներն ունեն լավ տեսողություն: Ինչ-որ մեկը օգտագործում է տեքստի ճանաչման և ընթերցման ծրագիր: Իսկ որոշ մարդիկ պարզապես անջատում են պատկերների ցուցադրումը բրաուզերում: Ահա թե ինչու կան գծանկարների այլընտրանքային ենթագրեր:
Եթե իմաստ չունի դրանք ստորագրել (օրինակ՝ ցուցակի նշիչ կամ ինչ-որ սլաք), ապա alt հատկանիշը թողնում է դատարկ տարածություն չակերտների միջև։
div պիտակի ատրիբուտներ
Div թեգը ունի միայն երկու հատկանիշ.
id - հատկանիշ, որը թույլ է տալիս վերագրել եզակիարժեքը, այսինքն՝ այն, որն օգտագործվում է էջում ընդամենը մեկ անգամ. Օրինակ, վերնագիր կամ ստորագիր:
Այսպիսով, մենք կարող ենք հետագայում որոշ պարամետրեր սահմանել ոճի թերթիկում div պիտակի համար՝ id հատկանիշով և վերնագրի արժեքով, և բոլորովին այլ՝ ստորագրի համար: Եվ զննարկիչը ճիշտ է ընդունում, որ տեքստի այս հատվածը պատկանում է «վերնագրին» և մուտքագրվելու է, օրինակ, մեծ և կարմիր տառատեսակով, բայց սա պատկանում է «footer»-ին և մուտքագրվելու է փոքր և մոխրագույն տառատեսակով։ Եվ ոչ մի շփոթություն:
class-ը հատկանիշ է, որը թույլ է տալիս նույն արժեքը վերագրել մի քանի տարրերի: Օրինակ, էջի բոլոր պատկերներին ավելացրեք նույն հաստության և գույնի շրջանակ: Քանի որ կան մի քանի պատկերներ, id հատկանիշն այլևս չի կարող օգտագործվել, ուստի մենք օգտագործում ենք class .
Առաջին անգամ, կարծում եմ, բավական է։ Եթե ինչ-որ բան անհասկանալի է կայքերի արգելափակման դասավորության հետ կապված, հարցրեք մեկնաբանություններում:
Շարունակելի. Մնալ կապի մեջ!
Div բլոկներով դասավորությունը վաղուց դարձել է ստանդարտ և ունի մի շարք առավելություններ աղյուսակային դասավորության նկատմամբ: Այնուամենայնիվ, իրականում սկսնակ մշակողները շփոթված են այս նույն բլոկների վարքագծի վերաբերյալ:
Դիտարկենք բլոկի դասավորության հիմնական կետերը: Այժմ մենք հաշվի չենք առնի html5 ստանդարտը, այլ պարզապես կանդրադառնանք div բլոկներով դասավորության հիմունքներին, որն օգտագործվում է դասավորության կամ էջի առանձին բաղադրիչ ստեղծելու ժամանակ։
Ի՞նչն է համարվում բլոկի տարր:
Էջի վրա նման տարրի տարածքը ներկայացված է ուղղանկյունով, ըստ նախնականի, այն զբաղեցնում է ողջ հասանելի լայնությունը և սկսվում է նոր տողից:
Բլոկի դասավորության մեջ օգտագործվող ամենատարածված տարրը ունիվերսալ տարրն է
.
Այսպիսով, պարզից մինչև բարդ: Տեսնենք, թե ինչպես են div-ները հայտնվում լռելյայնորեն՝ առանց ոճերի ազդելու իրենց դիրքի վրա: Պարզության համար մենք ոճեր կավելացնենք տարրերին inline՝ ոճ հատկանիշի միջոցով:
Բլոկ 1
Բլոկ 2
Բլոկ 3
Եկեք յուրաքանչյուր բլոկի համար ավելացնենք լայնության արժեք.
Բլոկ 1
Բլոկ 2
Բլոկ 3
Կարելի է տեսնել, որ յուրաքանչյուր բլոկ, ըստ ճշգրտման, գտնվում է նոր գծի վրա: Սա նրանց նորմալ պահվածքն է։
Հիմա հարց է առաջանում՝ ինչպես դիրքավորել div բլոկներ մեկ տողում, մեկը մյուսի հետեւից?
Այդ նպատակով կա հատկություն, որը որոշում է, թե որ կողմում բլոկը հարկադրված կլինի հավասարեցնել: Միևնույն ժամանակ, մյուս եզրից այն կարող է հոսել այլ տարրերի շուրջ:
Float հատկությունն ունի հետևյալ իմաստները.
- ձախ - բլոկը հավասարեցված է ձախ եզրին, հոսում է աջ
- աջ - բլոկը հավասարեցված է աջ եզրին, հոսում դեպի ձախ
- ոչ մեկը - ոչ մի փաթաթում նշված չէ, բլոկն իրեն պահում է լռելյայն, ինչպես նախորդ օրինակներում:
Եկեք մեր բլոկներին ավելացնենք float:left, որպեսզի բլոկները հավասարեցվեն ձախ կողմում.
Բլոկ 1
Բլոկ 2
Բլոկ 3
Արդյունքում բլոկները շարվեցին մեկ տողի վրա։ Լավ, ենթադրենք, որ մենք ցանկանում էինք ավելացնել ևս մեկ div ներքևում, և մենք դա կանենք առանց նշելու float հատկությունը.
Բլոկ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բաժին 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:
Բլոկ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բաժին 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:
Ինչու՞ դա տեղի ունեցավ: Մի խոսքով, դա տեղի է ունենում, քանի որ լողացող տարրերը դուրս են գալիս փաստաթղթի հոսքից: Այնուամենայնիվ, սա առանձին հոդվածի թեմա է: Այստեղ մենք կծանոթանանք նոր հատկության հետ, որը վերահսկում է լողացող տարրերի վարքը.
- ձախ - անջատում է ձախ կողմում փաթաթումը, բոլոր տարրերը կցուցադրվեն նոր տողում (տարրի տակ)
- rigth - թույլ չի տալիս տարրը փաթաթվել աջ կողմում
- երկուսն էլ - արգելում է տարրը երկու կողմից փաթաթել, խորհուրդ է տրվում օգտագործել այն, երբ հստակ պետք է տարրը ցույց տալ նոր գծի վրա, կամ անհայտ է, թե որ կողմից կարելի է փաթաթել այլ տարրերի շուրջը:
Բլոկ 4-ին ավելացնենք clear:left հատկությունը, որը թույլ չի տա այս տարրը հոսել ձախ կողմում գտնվող այլ լողացող տարրերի շուրջ:
Բլոկ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բաժին 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:
Բլոկ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բաժին 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:
Բլոկ 4-ը տեղադրվում է նոր գծի վրա, ինչպես մեզ անհրաժեշտ է:
Այս դեպքում մենք գիտենք, թե ինչպես են գտնվում մյուս բլոկները, ուստի օրինակում մենք անմիջապես նշել ենք clear:left: Լինում են իրավիճակներ, երբ մենք հստակ չգիտենք, թե լողացող բլոկը որ կողմին կհանդիպի, ուստի նման դեպքերում արժե հստակ նշել՝ երկուսն էլ, ինչը չեղարկում է երկու կողմերի հոսքը։ Այժմ մենք պարզել ենք, թե ինչպես կարելի է տեղադրել div բլոկները հորիզոնական մեկ տողի վրա:
Հիշեք, որ լողացող բլոկները տեղադրվում են նույն գծի վրա, եթե ծնող տարրի լայնությունը թույլ է տալիս: Եթե բլոկի տարրերը չեն տեղավորվում անընդմեջ, դրանք կփաթաթվեն նոր գծի վրա: Եթե դա կարևոր է, օրինակ, դասավորությունները դասավորելիս, դուք պետք է հաշվի առնեք դա, և լողացող բլոկների համար համոզվեք, որ սահմանեք լայնությունը՝ ֆիքսված (px) կամ ռետինե (%, rem և այլն): Հաջորդիվ նայենք նման իրավիճակներին։
Ինչպե՞ս ազդել բլոկների վրա, եթե ցանկանում ենք այդ բլոկները տեղադրել կենտրոնում:
Դասական լուծումը կլինի բլոկներին ծնող ավելացնելը և լուսանցքի օգտագործումը՝ 0 ավտոմատ; հատկություն:
Ինչո՞ւ ենք ծնողին տվել class.wrapper-ը: «փաթաթան» նշանակում է «փաթաթան»: Դա մի տեսակ ընդհանուր ընդունված պրակտիկա է, որը սահմանում է դասի անվանումը, երբ տարրը փաթաթում է այլ բլոկներ և դրանով թույլ է տալիս վերահսկել/ազդել դրանց վրա՝ փոխելով հենց ծնողը:
Վերցնենք նշագրումը նախորդ օրինակներից և բարելավենք այն:
Բլոկ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բաժին 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:
Բլոկ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բլոկ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Բաժին 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:
Այստեղ ամեն ինչ պարզ է թվում:
Եվ եթե մեզ դուր չի գալիս, որ տեքստը սերտորեն կպչում է մայր բլոկի եզրին, և մենք ցանկանում ենք դաշտեր ավելացնել առանց նշագծման մեջ փոփոխություններ կատարելու՝ միայն օգտագործելով css: Եկեք տարրերին ավելացնենք padding հատկությունը.
Բլոկ 1. Lorem
Բլոկ 2. Lorem ipsum
Բլոկ 3. Lorem ipsum
Բլոկ 4. Lorem
Եվ մենք տեսնում ենք, որ մեր դասավորությունը քանդվել է: 3-րդ բլոկը ինչ-որ տեղ է գնացել։ Ինչու՞ դա տեղի ունեցավ: Պատասխանը պարզ է. Էլեմենտներին դաշտեր ավելացնելով՝ մենք մեծացրինք դրանց լայնությունը։ Այժմ արժեքներն են.
Բլոկ 1՝ 10 + 200 + 10 = 220px
Բլոկ 2՝ 10 + 150 + 10 = 170px
Բլոկ 3. 10 + 100 + 10 = 120 px
Բլոկ 4. 10 + 450 + 10 = 470 px
220 + 170 + 120 = 510px
Երեք բլոկների ընդհանուր լայնությունը 510 է, դրանք չեն տեղավորվում մայրիկի լայնության մեջ (450) և, հետևաբար, տեղափոխվում են նոր տող:
Ինչպե՞ս ուղղել այն: Դուք կարող եք անել հետևյալը.
- Վերականգնել լայնության արժեքները յուրաքանչյուր բլոկի համար՝ հաշվի առնելով լուսանցքները: Բլոկի չափերը նվազեցնելով: Ամեն ինչ նորից կկազմվի մեկ տողի մեջ: Համաձա՞յն եք, որ սա անհարմար է: Ամեն անգամ, երբ մտնում եմ դասավորության մեջ և ինչ-որ բան խմբագրում:
- Օգտագործեք տուփի չափման հատկությունը՝ border-box: Որպեսզի հաշվարկը վերցվի բլոկի ընդհանուր լայնությունից: Խորհուրդ եմ տալիս պարզել, թե որն է css բլոկի մոդելը։
Օգտագործելով երկրորդ տարբերակը, ստացվում է հետևյալը.
Բլոկ 1. Lorem
Բլոկ 2. Lorem ipsum
Բլոկ 3. Lorem ipsum
Բլոկ 4. Lorem
Բլոկ 1. Lorem
Բլոկ 2. Lorem ipsum
Բլոկ 3. Lorem ipsum
Բլոկ 4. Lorem
Հիմա եկեք հավաքենք մեր ստացած ողջ տեղեկատվությունը և փորձենք ստեղծել պարզ ստանդարտ եռասյուն դասավորություն՝ ճկուն դասավորությամբ, որը ձգվելու է մինչև առավելագույնը 900px, որից հետո ամբողջ դասավորությունը կտեղավորվի կենտրոնում:
Ստեղծեք դասավորության նշում.
Փաստաթուղթ
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci assummenda earum!
Մենք գրում ենք ոճեր.
Body (առավելագույն լայնությունը՝ 900px; /* սահմանափակեք առավելագույն լայնությունը */ լուսանցք՝ 0 ավտոմատ;) /* մարմնի ներսում գտնվող բոլոր բլոկների համար, փոխեք բլոկի լայնության հաշվարկման ալգորիթմը և ավելացրեք 10px լուսանցքներ բոլոր բլոկներին */ body div (- webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; ) .header (ֆոն` #CCA69E; padding: 10px; ) կողագոտ (լայնություն՝ 20 %, ֆոն՝ #8ED9B6, լողացող՝ ձախ; ) .բովանդակություն ( լողացող՝ ձախ; լայնություն՝ 60%; ) .աջ կողագոտի ( լայնությունը՝ 20%, ֆոն՝ #FF9282, լողացող՝ ձախ; ) .footer (ֆոն՝ #000; պարզ՝ երկուսն էլ; /* անջատել փաթաթումը երկու կողմից, բլոկը ցուցադրվում է նոր տողում */ գույնը՝ #ccc; )
Եթե ինչ-որ բան անհասկանալի է, հարցրեք մեկնաբանություններում:
Կարող է օգտակար լինել կարդալ.