Kas ir kastes modelis CSS?

CSS bloku modeļa apraksts raksturo, kā elementi tiek attēloti lapā kā taisnstūra bloki. Tas sastāv no četriem zonām vai slāņiem, kas pārklājas, sākot ar saturu:

1. Content (Saturs): Zona, kurā atrodas faktiskais elementa saturs (teksts, attēli utt.). Tā izmērs ir noteikts ar īpašībām width un height.

2. Padding (Iekšējais apmales): Caurspīdīga zona starp saturu un elementa robežu. To nosaka ar īpašībām padding-top, padding-right, padding-bottom, padding-left vai saīsinājumu padding.

3. Border (Robeža): Līnija, kas apņem Padding un Content. Tās stils, biezums un krāsa ir noteikti ar īpašībām border-width, border-style, border-color vai saīsinājumiem, piemēram, border.

4. Margin (Malējais attālums): Caurspīdīga zona ap elementa robežu, kas to atdala no citiem elementiem. To nosaka ar īpašībām margin-top, margin-right, margin-bottom, margin-left vai saīsinājumu margin. Sekojošo bloku margas var saplūst.

Standarta uzvedība, kas aprakstīta ar box-sizing: content-box (pēc noklusējuma), nosaka, ka īpašības width un height attiecas tikai uz saturu (Content). Padding un Border tiek pievienoti šim izmēram, palielinot kopējo izmēru.

Izmantojot box-sizing: border-box, īpašības width un height ietver Content, Padding un Border. Margin vienmēr tiek pievienots kopējam elementa izmēram, neatkarīgi no box-sizing.

Piemērs:

div {
  width: 100px; /* Saturs platums (content-box) vai visa elementa platums (border-box) */
  height: 50px; /* Saturs augstums (content-box) vai visa elementa augstums (border-box) */
  padding: 10px; /* Iekšējais apmales */
  border: 2px solid black; /* Robeža */
  margin: 15px; /* Malējais attālums */
}

Atkarībā no box-sizing vērtības, faktiskie izmēri būs atšķirīgi:

• box-sizing: content-box: Faktiskais platums = 100px (Content) + 10px (Padding-left) + 10px (Padding-right) + 2px (Robeža-left) + 2px (Robeža-right) = 124px. Faktiskais augstums = 50px (Content) + 10px (Padding-top) + 10px (Padding-bottom) + 2px (Robeža-top) + 2px (Robeža-bottom) = 74px.
• box-sizing: border-box: Faktiskais platums = 100px (Content + Padding + Border). Faktiskais augstums = 50px (Content + Padding + Border).

Malējais attālums margin: 15px tiek pievienots šim kopējajam izmēram.