Ի՞նչ է բոքսային մոդելը, ինչից է բաղկացած և ինչ տեսակներ ունի։

Բոքսային մոդելը (CSS Box Model) — դա աբստրակտ մարմին է, որը նկարագրում է, թե ինչպես են HTML տարրերը ներկայացվում էջում՝ ուղղանկյուն բլոկների տեսքով: Այն որոշում է պարունակության, ներքին մաքսիմալների, սահմանների և արտաքին մաքսիմալների չափերը և դասավորությունը:

Բոքսային մոդելը բաղկացած է հետևյալ մասերից՝

• Content: տարրի պարունակությունը (տեքստ, պատկերներ և այլն): Նրա չափը որոշվում է width և height հատկություններով:
• Padding: տարածք տարրի պարունակության և նրա սահմանների միջև: Որոշվում է padding-top, padding-right, padding-bottom, padding-left կամ կրճատված padding հատկություններով:
• Border: սահմանը ներքին մաքսիմալների և պարունակության շուրջ: Որոշվում է border-width, border-style, border-color կամ կրճատված border հատկություններով:
• Margin: տարածք տարրի սահմանների և արտաքին տարրերի միջև: Որոշվում է margin-top, margin-right, margin-bottom, margin-left կամ կրճատված margin հատկություններով:

Կան երկու հիմնական տեսակ բոքսային մոդելի, որոնք որոշվում են box-sizing հատկությամբ՝

• content-box (նույնականացված արժեք): Տարրի լայնությունը և բարձրությունը, որոնք սահմանված են width և height հատկություններով, վերաբերում են միայն պարունակության տարածքին: Padding և Border ավելացվում են այս չափերին՝ մեծացնելով ընդհանուր չափը:

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* Ավելացնում է 20px ընդհանուր չափին յուրաքանչյուր ուղղությամբ */
    border: 2px solid black; /* Ավելացնում է 4px ընդհանուր չափին յուրաքանչյուր ուղղությամբ */
    box-sizing: content-box; /* Դեպի default behavior */
  }
  /* Ընդհանուր չափը կլինի 124px x 124px */
  

• border-box: Տարրի լայնությունը և բարձրությունը, որոնք սահմանված են width և height-ով, ներառում են պարունակությունը, padding-ը և border-ը: Padding և Border չեն մեծացնում ընդհանուր չափը, այլ «կրճատում» են պարունակության տարածքը:

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* Ինտեգրված է ընդհանուր լայնության/բարձրության մեջ */
    border: 2px solid black; /* Ինտեգրված է ընդհանուր լայնության/բարձրության մեջ */
    box-sizing: border-box;
  }
  /* Ընդհանուր չափը կլինի 100px x 100px */
  

Հաճախ օգտագործվում է border-box՝ ավելի կանխատեսելի չափման վարքագծի համար, երբ ավելացվում են padding և border: դա հարմար է, օրինակ, ռեսպոնսիվ դիզայնի դեպքում, երբ տարրերը պետք է զբաղեցնեն որոշակի տոկոսային լայնություն։