Kas yra dėžutės modelis CSS?

CSS blokinio modelio aprašymas, kaip elementai yra rodomi puslapyje kaip stačiakampiai blokai. Jis susideda iš keturių zonų arba sluoksnių, kurie yra vienas ant kito, pradedant nuo turinio:

1. Content (Turinys): Sritis, kurioje yra tikrasis elemento turinys (tekstas, vaizdai ir kt.). Jo dydis nustatomas savybėmis width ir height.

2. Padding (Vidinis apvadas): Skaidri sritis tarp turinio ir elemento krašto. Nustatoma savybėmis padding-top, padding-right, padding-bottom, padding-left arba trumpiniu padding.

3. Border (Rėmelis): Linija, apjuosianti Padding ir Content. Jo stilius, storis ir spalva nustatomi savybėmis border-width, border-style, border-color arba trumpiniu border.

4. Margin (Išorinis tarpas): Skaidi sritis aplink elemento kraštą, atskirianti jį nuo kitų elementų. Nustatoma savybėmis margin-top, margin-right, margin-bottom, margin-left arba trumpiniu margin. Gretimų blokų maržos gali susilieti.

Standartinis elgesys, aprašytas su box-sizing: content-box (numatytasis), nustato, kad savybės width ir height taikomos tik turiniui (Content). Padding ir Border pridedami prie šio dydžio, padidindami bendrą dydį.

Naudojant box-sizing: border-box, savybės width ir height apima Content, Padding ir Border. Margin visada pridedama prie bendro elemento dydžio, nepriklausomai nuo box-sizing.

Pavyzdys:

div {
  width: 100px; /* Turinio plotis (content-box) arba viso elemento plotis (border-box) */
  height: 50px; /* Turinio aukštis (content-box) arba viso elemento aukštis (border-box) */
  padding: 10px; /* Vidinis apvadas */
  border: 2px solid black; /* Rėmelis */
  margin: 15px; /* Išorinis tarpas */
}

Priklausomai nuo box-sizing reikšmės, tikrieji matmenys bus skirtingi:

• box-sizing: content-box: Tikrasis plotis = 100px (Content) + 10px (Padding-left) + 10px (Padding-right) + 2px (Border-left) + 2px (Border-right) = 124px. Tikrasis aukštis = 50px (Content) + 10px (Padding-top) + 10px (Padding-bottom) + 2px (Border-top) + 2px (Border-bottom) = 74px.
• box-sizing: border-box: Tikrasis plotis = 100px (Content + Padding + Border). Tikrasis aukštis = 50px (Content + Padding + Border).

Išorinis tarpas margin: 15px pridedamas aplink šį bendrą dydį.