Ինչ է CSS-ում բլոկային մոդելը։

CSS-ում բոքսի մոդելը նկարագրում է ուղղանկյուն տարածք, որը ստեղծվում է յուրաքանչյուր տարրի համար և օգտագործվում է նրա չափերը և դիրքը հաշվարկելու համար: Այն բաղկացած է չորս մասից՝

• Բովանդակության տուփ: Տարրի տարածքը, որտեղ ցուցադրվում է տարրի բովանդակությունը (տեքստ, պատկերներ և այլն): Նրա չափը որոշվում է width և height հատկություններով:
• Padding տուփ: Տարրի բովանդակության և տարրի սահմանների միջև տարածքը: Նրա չափը որոշվում է padding հատկությամբ: Տարրի ֆոնային գույնը և նկարը տարածվում են այս տարածքի վրա:
• Սահմանների տուփ: Տարրի սահմանը, որը շրջապատում է padding տուփը: Նրա չափը որոշվում է border հատկություններով:
• Մարգինայի տուփ: Տարրի սահմանների շուրջ տարածքը, որը տարբերակում է այն այլ տարրերից: Նրա չափը որոշվում է margin հատկությամբ: Այս տարածքը միշտ ամբողջությամբ թափանցիկ է:

Ստանդարտ տարրի չափը հաշվարկվում է հետևյալ կերպ:

լայնություն = width + padding-left + padding-right + border-left-width + border-right-width
բարձրություն = height + padding-top + padding-bottom + border-top-width + border-bottom-width

box-sizing հատկությունը թույլ է տալիս փոխել այս մոդելը:

• content-box (նույնպես՝ ստանդարտ): width և height չափերը վերաբերում են միայն բովանդակության տուփին:
• border-box: width և height չափերը ներառում են padding և border:

.element-default {
  width: 100px; /* Բովանդակության տուփի լայնությունը = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Իրական տարրի լայնությունը: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Իրական տարրի լայնությունը = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Բովանդակության տուփի լայնությունը: 100 - 10 - 10 - 5 - 5 = 70px */
}