Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HT21 - DA106A - Layout med CSS (1)

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
September 14, 2021

HT21 - DA106A - Layout med CSS (1)

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 14, 2021
Tweet

Transcript

  1. LAYOUT MED CSS

  2. Dagens föreläsning Dagens agenda • Snabb repetition av HTML &

    CSS • Element för positionering & layout • Positionering av element • Statisk • Relativ • Absolut • Fixederad • Layout med CSS
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. Repetition: CSS • Att formge en webbplats • Olika klädsel

    till samma innehåll • Hur hittar man det man vill formge?
  10. None
  11. Boxmodellen för HTML-element

  12. Exempel på boxmodellen

  13. None
  14. None
  15. None
  16. Vad gör en layout bra?

  17. Att visa upp HTML-element

  18. Tre olika metoder för att visa upp element Float Flexbox

    Grid
  19. MAN KAN I PRINCIP BYGGA ALLT MED ALLA TEKNIKERNA Men

    det är en dålig idé…
  20. ATT VÄLJA HUR ELEMENT SKA VISAS UPP

  21. display: float • Fungerar bäst när man vill positionera individuellt

    element i förhållande till andra element. Exempel: • En bild ska ligga till höger/vänster om texten • En informationsruta ska ligga till höger/vänster om annat innehåll
  22. display: flex • Fungerar bäst när man vill positionera flera

    element i förhållande till varandra, exempelvis: • Flera bilder efter varandra • Element ska ha olika storlekar beroende på tillgång av yta
  23. display: grid • Fungerar bäst när man vill positionera element

    som ett rutnät, exempelvis: • Bygga layouter med kolumner som har ”fasta” propotioner • Element ska ha olika storlekar beroende på tillgång av yta
  24. Idag tittar vi på: float

  25. OLIKA SÄTT ATT POSITIONERA ELEMENT relativ, statisk, absolut, fixerad

  26. CSS - position

  27. BOXMODELLEN Egenskapen: box-sizing

  28. None
  29. None
  30. box-sizing: content-box; box-sizing: border-box; element { box-sizing: content-box; /* Standard

    */ width: 158px; padding: 20px; border: 1px solid black; } element { box-sizing: border-box; width: 200px; padding: 20px; /* Inkluderas i width */ border: 1px solid black; /* Inkluderas i width */ }
  31. DEMO - POSITIONERING Med float

  32. None
  33. https://de veloper.m ozilla.org/ en- US/docs/ Web/HTM L/Element

  34. None
  35. Hur skapar man en layout?

  36. None
  37. Vi behöver alltså • Sidhuvud • Navigation • Innehåll •

    Sidfot <header> <nav> <main> <footer>
  38. Kan vara bra att ha… • En box (<div>) som

    omsluter hela sidan.
  39. DEMO LAYOUT

  40. None