Դաս 8: Box model

0

CSS-ում Box մոդելը իրենից ներկայացնում է վանդակներ, որոնք գեներացվել են HTML տարրերի համար։ Բացի այդ Box մոդելը պարունակում է նաև մարգինալների, սահմանների և յուրաքանչյուր տարրի բովանդակության (padding, margin և  border) մանրամասն կարգավորումները։ Ներքևում պատկերված դիագրման ցույց է տալիս, թե ինչպես է Box մոդելը կառուցվում՝

Box model-ը CSS-ում

figure008

Վերևում ներկայացված իլլուստրացիան բավականին տեսական է թվում, այնպես որ, եկեք փորձենք օգտագործել մոդելը փաստացի մի օրինակի վրա, որը կունենա վերնագիր և որևէ տեքստի։ HTML-ը մեր օրինակ դեպքում հետևյալն է (from the Universal Declaration of Human Rights):

       <h1>Article 1:</h1>

<p>All human beings are born free

and equal in dignity and rights.

They are endowed with reason and conscience

and should act towards one another in a

spirit of brotherhood</p>

Ավելացնելով մի քանի գույն և ինֆորմացիա ֆոնտի մասին, օրինակը կունենա հետևյալ տեսքը՝

figure009

Օրինակը պարունակում է երկու տարր՝ <h1> և <p> ։ Box մոդելը այս երկու տարրերի համար կարելի է ցուցադրել հետևյալ ձևով՝

figure010

Թեև տեսքը կարող է լինել մի քիչ բարդ, իլլուստրացիան ցույց է տալիս, թե ինչպես է յուրաքանչյուր HTML տարր շրջապատված է box-երով (վանդակներով), որոնք մենք կարող ենք կարգավորել օգտագործելով CSS-ը։

Հատկանիշները, որոնք կարգավորում են տարբեր վանդակնեը հետևյալն են՝ padding, margin և border։ Հաջորդ երկու դասերը կվերաբերվեն այս երեք հատկանիշներին:

Այդ դասերը ավարտելուց հետո, դուք կտիրապետեք Box մոդելը և կկարողանաք դասավորել ձեր փաստաթղթերը շատ ավելի հստակ և ճշգրիտ, քան օգտագործելով HTML-ի հնացած աղյուսակները:

Ամփոփում

Այս դասի ընթացքում դուք ծանոթացաք Box մոդելին։ Հաջորդ երեք դասերը ավելի մանրամասն պատկերացում կտան, թե ինչպես ստեղծել և հսկել տարրերը Box մոդելում։

 Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.