Ինչ է CSS-ում տուփի մոդելը։

CSS բլոկային մոդելը նկարագրում է, թե ինչպես են տարրերը ցուցադրվում էջում որպես ուղղանկյուն բլոկներ: Այն բաղկացած է չորս գոտուց կամ շերտից, որոնք միմյանց վրա են տեղադրվում՝ սկսած պարունակությունից:

1. Content (Բովանդակություն): Տարրի իրական պարունակության տարածք (տեքստ, պատկերներ և այլն): Նրա չափը սահմանվում է width և height հատկություններով:

2. Padding (Ներքին սահում): Անթափանց տարածք պարունակության և տարրի սահմանների միջև: Կարգավորվում է padding-top, padding-right, padding-bottom, padding-left կամ կրճատված padding հատկություններով:

3. Border (Սահմանագիծ): Գիծ, որը շրջապատում է Padding-ը և Content-ը: Նրա ոճը, հաստությունը և գույնը սահմանվում են border-width, border-style, border-color հատկություններով կամ կրճատումներով՝ օրինակ border:

4. Margin (Արտաքին սահում): Անթափանց տարածք տարրի սահմանների շուրջ, որը բաժանում է այն մյուս տարրերից: Կարգավորվում է margin-top, margin-right, margin-bottom, margin-left կամ կրճատված margin հատկություններով: Սահումները կարող են միմյանց հետ համատեղվել:

Ստանդարտ վարքագիծը, որը նկարագրված է box-sizing: content-box (նույնպես՝ ըստ նախնական կարգավորումների), որոշում է, որ width և height հատկությունները վերաբերում են միայն պարունակությանը (Content): Padding և Border-ը ավելացվում են այս չափին՝ մեծացնելով ընդհանուր չափը:

Օգտագործելով box-sizing: border-box, width և height հատկությունները ներառում են Content-ը, Padding-ը և Border-ը: Margin-ը միշտ ավելացվում է ընդհանուր չափին՝ անկախ box-sizing-ից:

Օրինակ՝

div {
  width: 100px; /* Content-ի լայնությունը (content-box-ի դեպքում) կամ ամբողջ տարրի չափը (border-box-ի դեպքում) */
  height: 50px; /* Content-ի բարձրությունը (content-box-ի դեպքում) կամ ամբողջ տարրի բարձրությունը (border-box-ի դեպքում) */
  padding: 10px; /* Ներքին սահում */
  border: 2px solid black; /* Սահմանագիծ */
  margin: 15px; /* Արտաքին սահում */
}

Անհրաժեշտության դեպքում, box-sizing-ի արժեքից կախված՝ իրական չափերը տարբեր կլինեն:

• box-sizing: content-box: Իրական լայնությունը = 100px (Content) + 10px (Padding-left) + 10px (Padding-right) + 2px (Border-left) + 2px (Border-right) = 124px: Իրական բարձրությունը = 50px (Content) + 10px (Padding-top) + 10px (Padding-bottom) + 2px (Border-top) + 2px (Border-bottom) = 74px:
• box-sizing: border-box: Իրական լայնությունը = 100px (Content + Padding + Border): Իրական բարձրությունը = 50px (Content + Padding + Border):

Արտաքին սահում margin: 15px ավելացվում է այս ընդհանուր չափին։