Fyrirlestur — Box model

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Box model

Box módelið er skilgreint í CSS2.1 spec og lýsir því hvernig rétthyrnd box fyrir element eru mynduð.

---

Margin

• Margin skilgreinir ysta lag boxsins með, skilgreind lengd
  • margin-top, margin-right, margin-bottom og margin-left
• Getur verið neikvæð tala
• Ef vinstri og hægri margin eru sett sem auto er element miðjað

---

Margin shorthand

margin: 1em;
/*      allt; */

margin: 1em        0;
/*      top&bottom right&left; */

margin: 0   1em        2em;
/*      top right&left bottom; */

margin: 0   1em   2em    3em;
/*      top right bottom left; */

---

Collapsing margin

• Lóðrétt margin tveggja eða fleiri boxa geta fallið saman
• Nokkuð flóknar reglur segja til um hvenær og hvernig það gerist

---

Border

• Border er næst ystalag boxsins, getum skilgreint:
  • width sem jákvæð tala með border-width
  • style með lykilorði, t.d. solid í border-style
  • color sem litagildi með border-color
• border: <breidd> <stíll> <litur>;
• border: 1px solid #000;

---

Dæmi

• Dæmi um margin
• Dæmi um collapsing margin
• Dæmi um border

---

Padding

• Padding er næst innsta lag boxsins
• Skilgreint eins og margin en getur ekki fengið neikvætt gildi
• Shorthand eins og margin
• Fær bakgrunnslit sem skilgreindur er á hlut

---

Breidd og hæð

• Efni box er innst
• Getum skilgreint breidd með width og hæð með height fyrir efnið
• Hlutfallslegar stærðir miða við pláss sem foreldri veitir

---

• Ættum aldrei að setja fasta hæð á boxi nema við höfum mjög góða ástæðu, frekar lágmarks/hámarks hæð
  • Efni ætti að stýra hæð á boxi
• auto lætur vafra finna út gildi sjálfkrafa

---

Takmarkanir á hæð og breidd

Stundum viljum við að boxin okkar séu aldrei minni eða stærri en ákveðið á hæð eða breidd

• min/max-height: X; takmarkar box þ.a. það sé aldrei minna/stærra en X
• min/max-width: X; takmarkar box þ.a. það sé aldrei mjórra/breiðara en X

---

Boxið

Heildar pláss sem box tekur er reiknað:

width = left margin + right margin
  + left border + right border + left padd
  + right padding + content width

height = top margin + bottom margin
  + top border + bottom border + top padd
  + bottom padding + content height

---

• Erfitt að blanda saman hlutfallslegum og nákvæmum stærðum!
• Hvað ef width: 50%, margin-left: 1rem, og border: 1px solid #000?
  • 50% + 1rem + 1px ??

---

Box sizing

• box-sizing breytir því hvernig box modelið er reiknað
  • box-sizing: content-box; - sjálfgefið gildi, allt tekið með í reikninginn
  • box-sizing: border-box; - aðeins margin er tekið með í reikninginn
• Getum þá betur hugsað um stærð á boxi sem blandar einingum—þær eru bara ekki með!

---

Oft er allt reiknað með box-sizing: border-box;:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

---

Dæmi um víddir

• Efni ætti að stýra hæð
• Box módel

---

Lang flest í CSS er rétthyrnt box!

---