Skip to content

Latest commit

 

History

History
178 lines (114 loc) · 4.07 KB

03.3.css.md

File metadata and controls

178 lines (114 loc) · 4.07 KB
Raw
title
Fyrirlestur 3.3 — CSS 1 – Box model

Fyrirlestur 3.3 — CSS #1 – Box model

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Box model

Box módelið lýsir því hvernig rétthyrnd box fyrir element eru mynduð.

Útskýringar mynd af box modelinu

Margin

  • Ysta lag boxsins með skilgreinda 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

Dæmi

Border

  • 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

Padding

  • Næst innstalag 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æð

  • Getum skilgreint breidd með width og hæð með height fyrir efnið
  • Hlutfallslegar stærðir miða við foreldri
  • Ættum aldrei að setja hæð á boxi nema við höfum mjög góða ástæðu
    • Efni ætti að stýra hæð á boxi, dæmi
  • auto lætur vafra finna út gildi sjálfkrafa

Boxið

Vídd box er þá reiknað:

width = left margin + right margin
  + left border + right border + left padding
  + right padding + content width
height = top margin + bottom margin
  + top border + bottom border + top padding
  + bottom padding + content height

Erfitt að blanda saman hlutfallslegum og nákvæmum stærðum

Box sizing

  • CSS3 skilgreinir box-sizing sem 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

Dæmi

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

Dæmi

Lang flest í CSS er rétthyrnt box!

Útskýringar mynd af box modelinu

Visual formatting model

  • CSS 2.1 skilgreinir visual formatting model
  • Grunnur í að vinna með útlit síðu
  • Lengi vel eina leið til að vinna með útlit síðu
  • Gerð boxa
    • block vs. inline og display eigindið
  • Eðlilegt flæði
  • Staðsetning með position
  • Float
  • Þriðja víddin

Normal flow – eðlilegt flæði

Ef við höfum ekki skilgreint hvernig element á að haga sér er það í eðlilegu flæði og er sjálfgefið annað hvort block eða inline

  • block element forma blokkir og fylla upp í breidd foreldris
  • inline element forma ekki blokkir heldur dreifir sér í línur, inline element fá ekki lárétt margin, width eða height

Display

display eigindi stillir hvernig element hegðar sér, t.d.:

  • display: block lætur element haga sér sem blokk
  • display: inline hagar sér sem inline
  • display: inline-block element er raðað í línu en hagar sér eins og block
  • display: none - box er algjörlega fjarlægt, ekki með í útreikningum

Dæmi