Boxmodellen
Lådan bakom varje element: mått, padding, border och margin.
0% klart · 10 frågor
Du skriver width: 200px, men webbläsaren ritar 250 pixlar. Ingen felkod, inget rött i konsolen, bara en layout som inte riktigt stämmer. Varje element på en webbsida är en låda, och webbläsaren räknar ut lådans storlek enligt regler du ännu inte sett. Tills du kan dem kommer dina designer att gå sönder i smyg, en pixel här och en rad som viker sig där.
I det här området lär du dig reglerna. Du väljer mått som respekterar användarens inställningar, förstår hur varje låda mäts och nollställer webbläsarens egna stilar så att varje projekt startar från ett känt läge. Till sist omsätter du alltihop där det märks som mest: klickytor som går att träffa med en klumpig fingertopp på en mobilskärm.
- 1 CSS-enheter & tillgängliga mått Ditt val av enhet avgör vem som kan använda din sida.
- 2 Boxmodellen Förstå hur webbläsaren bygger varje element som en låda: content, padding, border och margin.
- 3 CSS-reset Webbläsaren sätter stilar innan din CSS ens läses. Lär dig nollställa dem med en modern CSS-reset för en förutsägbar start.
- 4 Hit areas & UX Padding är inte bara estetik, det är klickyta. Lär dig hur du bygger knappar och komponenter som faktiskt går att använda på mobil.