Webbteknik 1

Boxmodellen handlar om egenskaper för elements storlek, kantlinjer och marginaler. Du ska nu gå igenom några övningar, för att få en förståelse av hur modellen fungerar.

Följande är förslag på övningar. Experimentera gärna med egna förändringar, så att du lär dig hur egenskaperna fungerar.

Förberedelser

• Öppna mappen L4a (som finns i L4) i Visual Studio Code (VSC).
• Öppna filen index.html och style.css i VSC samt öppna sidan i Live Server.
• Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.

Storlek på boxarna

• Lägg in width: 300px; och height: 200px; i regeln för #box1.

  • Experimentera med olika värden och enheter för width, se sid. 253 i kursboken Learning Web Design. Prova t.ex. px, % och vw för width.

• Lägg in width: 150px; och height: 100px; i regeln för .wrapper div.

  • Storleken gäller då endast för de två sista boxarna, men inte för "box1", eftersom regeln för #box1 har ett id i selektorn och den specificerar då boxen mer än den med en class och element.
    • Se regler för "specificity" på sidan 284-285 i boken Learning Web Design.
  • Ta därför bort width och height i regeln för #box1. Storleken i .wrapper div ska nu användas för alla boxar i fortsättningen av denna lab.

Marginaler och "display"

• Lägg in margin med värdena 40px, 20px respektive 10px i reglerna för #box1, #box2 och #box3.

• Ta fram Inspektören i Firefox. Notera avståndet över och under boxarna. Marginalerna överlappar varandra.

  • Du kan peka på div-elementen för boxarna i HTML-koden i Inspektören, så ser du marginalerna med gul färg på webbsidan.
  • Du kan också klicka på knappen med en fyrkant och pil längst upp till vänster i Inspektören. Då kan du sedan föra muspekaren över boxarna på webbsidan och se marginalerna.

• Sätt padding till 10px för samtliga boxar i regeln för .wrapper div. Kontrollera i Inspektören och notera var padding kommer in.

• Lägg in display: inline; i regeln för .wrapper div.

  • Stilen för width och height har ingen effekt, men margin och padding funkar.
  • Kontrollera i Inspektören. att margin inte överlappar varandra i sidled.
    • Notera också att marginalen hamnar utanför det omgivande elementet (den vita rutan). Den "marginal" som finns mellan den vita rutans kanter och boxarna är padding i det omgivande elementet (div-elementet med class wrapper).

• Ändra display till inline-block i regeln för .wrapper div.

  • Nu funkar width och height för boxarna och marginalen hamnar innanför det omgivande elementet.
  • Notera att även box 2 och 3 flyttas ner lika mycket som box 1, men kontrollera i Inspektören att deras margin inte förändrats.

• Lägg till vertical-align: top; i regeln för .wrapper div.

  • Kontrollera i Inspektören att det är hela boxen, inklusive marginal, som justeras, så att alla boxars överkant läggs lika högt, dvs marginalernas överkant och inte innehållets överkant.
  • Prova även med andra värden, såsom bottom. Standardvärdet för vertical-align är baseline. Låt värdet vara baseline, då du experimenterat klart.

• Lägg in margin: 20px; i regeln för .wrapper div och ta bort margin i reglerna för #box1 till #box3. Alla boxar får då samma marginal.

Kantlinje

• I regeln för .wrapper div lägger du in border-width: 6px; border-style: solid; border-color: #000000;

  • De tre egenskaperna kan också förkortas till border: 6px solid #000000;
  • Prova även några andra stilar för border-style. Se sid 366-367 i boken Learning Web Design.

Avstånd mellan boxarna

• Sätt margin till 0 i regeln för .wrapper div.
  • Det blir ändå ett litet avstånd mellan dem pga radbrytningen mellan div-elementen i HTML-koden, som är "white space". Det ersätts av ett blanktecken av webbläsaren.
• Lägg in font-size: 0; i det omgivande elementet, dvs i regeln för .wrapper och lägg in font-size med önskad storlek (t.ex. 1rem) i de inre elementen, dvs i regeln för .wrapper div.
  • Detta "knep" behövs endast om boxarna ska ligga precis intill varandra. Om man sedan ändå lägger in en margin som är större än 0 på boxarna, behöver man ju inte ändra font-size.

Storlek på boxarna

• Sätt width till 33% i regeln för .wrapper div.
  • De får inte plats på en rad, eftersom även padding och border tar plats.
• Lägg till box-sizing: border-box; i regeln för .wrapper div, Justera width till 33.33333%.
  • Boxarna ska nu hamna intill varandra på samma rad och vara lika breda.

Innehållet påverkar även utanför boxen

• Lägg texten "Box 1" i ett h2-element för box 1 i HTML-dokumentet.

  • Kontrollera i Inspektören att h2 har en övre och undre marginal.
  • Lägg in margin: 0; i en ny regel för #box1 h2 (eller .wrapper div h2, om det ska gälla alla boxar)
  • Ändra vertical-align: till top i regeln för .wrapper div, så att boxarna kommer i jämnhöjd.
    • Du kanske redan har värdet top. Det beror på vad du avslutade med tidigare, då du experimenterademed olika värden.

• Lägg in ett p-element med lite Lorem ipsum under rubriken i box 1 i HTML-dokumentet.

  • Skriv t.ex. p>Lorem20 och tryck på tab-tangenten.

• Lägg in overflow: auto; i regeln för #box1. Testa även andra värden för overflow, men låt det sedan vara auto.

Visuella effekter

• Ändra width till 200px och margin till 20px i regeln för .wrapper div, för att tydligare se de rundade hörnen och skuggan, som du nu ska lägga in.

• I regeln för .wrapper div lägger du in border-radius: 15px;

  • Prova gärna med lite olika värden.

• En skugga på boxarna lägger du in genom att i regeln för .wrapper div lägga till box-shadow: 5px 5px 15px 2px #333333;

  • Se beskrivning av de olika värdena på sida 382-383 i Learning Web Design.
  • Prova även med andra värden. Även negativa värden på de två första, som bestämmer åt vilket håll skuggan ska gå.

Flexibilitet

• Testa med olika bredd på fönstret, genom att ta fram Följsamt designläge i Firefox.

Klar