Kas ir kastes modelis, no kā tas sastāv un kādi ir tā veidi?

Kastes modelis (CSS Box Model) ir ir abstrakta būtība, kas apraksta, kā HTML elementi tiek attēloti lapā kā taisnstūra bloki. Tas nosaka satura, iekšējo atstarpju, robežu un ārējo atstarpju izmērus un izvietojumu.

Kastes modelis sastāv no šādām daļām:

• Content: elementa saturs (teksts, attēli utt.). Tā izmērs ir noteikts ar width un height īpašībām.
• Padding: telpa starp elementa saturu un tā robežu. To nosaka ar padding-top, padding-right, padding-bottom, padding-left vai īsāku padding īpašību.
• Border: robeža ap iekšējo atstarpi un saturu. To nosaka ar border-width, border-style, border-color vai īsāku border īpašību.
• Margin: telpa starp elementa robežu un ārējiem elementiem. To nosaka ar margin-top, margin-right, margin-bottom, margin-left vai īsāku margin īpašību.

Ir divi galvenie kastu modeļa veidi, kas ir noteikti ar box-sizing īpašību:

• content-box (noklusējuma vērtība): elementa platums un augstums, kas ir noteikti ar width un height, attiecas tikai uz saturs. Padding un Border tiek pievienoti šiem izmēriem, palielinot kopējo izmēru.

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* Pievieno kopējam izmēram 20px katrā virzienā */
    border: 2px solid black; /* Pievieno kopējam izmēram 4px katrā virzienā */
    box-sizing: content-box; /* Noklusējuma uzvedība */
  }
  /* Kopējais elementa izmērs būs 124px uz 124px */
  

• border-box: elementa platums un augstums, kas ir noteikti ar width un height, ietver saturs, padding un border. Padding un Border nepalielina kopējo izmēru, bet "samazina" saturslāni.

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* Iekļauts kopējā platumā/augstumā */
    border: 2px solid black; /* Iekļauts kopējā platumā/augstumā */
    box-sizing: border-box;
  }
  /* Kopējais elementa izmērs būs 100px uz 100px */
  

Biežāk tiek izmantots border-box, jo tas nodrošina paredzamāku izmēru uzvedību, pievienojot padding un border. Tas ir ērti, piemēram, reaģējošā izkārtojumā, kur elementi ir jāaizņem noteiktā procentuālā platumā.