Kas ir kastes modelis CSS?

CSS blokējais modelis apraksta taisnstūra apgabalu, kas tiek ģenerēts katram elementam un tiek izmantots tā izmēru un novietojuma aprēķināšanai. Tas sastāv no četriem daļām:

• Content box: Apgabals, kurā tiek attēlots elementa saturs (teksts, attēli utt.). Tā izmērs ir noteikts ar width un height īpašībām.
• Padding box: Telpa starp satura robežu un elementa robežu. Tā izmērs ir noteikts ar padding. Elementa fona krāsa un attēls tiek izplatīti uz šo apgabalu.
• Border box: Elementa robeža, kas ieskauj padding box. Tā izmērs ir noteikts ar border.
• Margin box: Telpa ap elementa robežas, kas atdala to no citiem elementiem. Tā izmērs ir noteikts ar margin. Šī zona vienmēr ir pilnīgi caurspīdīga.

Elemento izmērs pēc noklusējuma tiek aprēķināts šādi:

platums = width + padding-left + padding-right + border-left-width + border-right-width
augstums = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Īpašība box-sizing ļauj mainīt šo modeli:

• content-box (noklusējums): width un height izmēri attiecas tikai uz content box.
• border-box: width un height ietver padding un border.

.element-default {
  width: 100px; /* Content box platums = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Faktiskais elementa platums: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Faktiskais elementa platums = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Content box platums: 100 - 10 - 10 - 5 - 5 = 70px */
}