De flesta webbdesigners tror att de kan CSS ganska väl. När allt kommer omkring, det är inte mycket till det: några typer av väljare, några dussin egenskaper och några överlappande regler som du knappt behöver komma ihåg eftersom de kokar ner till sunt förnuft. Men när man kommer till det så finns det många oklara detaljer som få designers verkligen förstår.
När jag undersökte resultaten av ett gratis CSS-test som jag har erbjudit online under de senaste sex månaderna, upptäckte jag en fråga som nästan kom rätt ut. Av de tusentals människor som testades, mindre än 14 % gjorde det rätt.
Frågan kokar ner till detta:
Frågan
Låt oss säga att din webbplats har en container div och inuti den en content div:
Låt oss nu ge innehållet div en toppmarginal:
.content {
margin-top: 10%;
}
Okej, så det är 10 %… men 10 % av den där? Det är frågan endast 13,8 % av människorna vet hur man svarar rätt. Och kom ihåg: dessa personer har tillgång till Google!
Det jag älskar med den här frågan är att Det verkar som att svaret borde vara uppenbart.. Så mycket att jag misstänker att de flesta bara gissar (och gissar fel). Men det kan tyckas självklart för dig. Jag menar, om du verkligen använder din fantasi finns det många sätt som webbläsaren kan beräkna en marginal som detta.
Så vad sägs om att jag begränsar det för dig eftersom tentamensfrågan faktiskt är flervalsfråga? Här är dina alternativ:
- 10 % av innehållets höjd div.
- 10% av containerns höjd div
- 10 % av innehållets bredd div
- 10% av containerns bredd div
Kom ihåg att endast 13,8 % av människorna kan välja rätt svar från den här listan. Det är mycket värre än slumpen!
Titta noga på svaren; Du kommer att se att det egentligen bara finns två saker du behöver veta:
Behållare eller innehåll?
Första är?
Nu är det här inte en gåva, men du kan förmodligen lita på dina instinkter. Om jag ställer in en div för att vara 50 % av bredden på dess behållare och sedan vill att dess vänstra och högra marginaler ska fylla resten av utrymmet, skulle jag naturligtvis ställa in dem på 25 % vardera (så att procentsatserna blir 100 % ) . För att det ska fungera måste de procentuella marginalerna baseras på behållarens dimensioner.
Faktum är att två tredjedelar av personerna som gör testet får den här delen av svaret rätt.
Bredd eller höjd?
För det andra, ?
Om du har varit uppmärksam är du förmodligen redan på din vakt. För att så få människor ska välja rätt svar måste det här vara en trickfråga, eller hur?
Och ändå, jag slår vad om att du knappt kan tro det. höjden på svaret. Det är det inte.
Ja, vi pratar om en högre marginal här. Ja, storleken på den marginalen är ett vertikalt mått. Ja, om ett block är 50 % av behållarens höjd och du gav det 25 % höjdhöjd, skulle du förvänta dig att det är 25 % av behållarens höjd.
Må inte dåligt om du trodde att det måste vara höjd. Nästan 80 % av personerna som gör testet håller med dig:
Det är vettigt… Nej, verkligen!
Tror du fortfarande inte på det? Här är ett citat från W3C CSS-specifikationer:
Procentsatsen beräknas med avseende på bredden på innehållsblocket i den genererade lådan. Observera att detta även gäller för toppmarginalen och bottenmarginalen.
Detsamma gäller topp- och bottenstoppningen, om du undrade. När det gäller gränser är det olagligt att ange deras bredd i procent.
Så vid det här laget tänker du förmodligen att skaparna av CSS är , eller så gjorde de bara ett riktigt dumt misstag. Men jag är här för att berätta att det finns två goda skäl att basera vertikala marginaler på bredden på det innehållande blocket:
Horisontell och vertikal konsistens
Naturligtvis finns det en förkortningsegenskap som låter dig ange marginalen för alla fyra sidorna av ett block:
margin: 10%;
Detta expanderar till:
margin-top: 10%; margin-right: 10%; margin-bottom: 10%; margin-left: 10%;
Nu, om du skulle skriva något av ovanstående alternativ, skulle du förmodligen förvänta dig att marginalerna på alla fyra sidor av blocket skulle vara lika stora, eller hur? Men om den vänstra marginalen och den högra marginalen baserades på behållarens bredd, och den övre marginalen och bottenmarginalen baserades på dess höjd, så skulle de normalt sett vara annorlunda!
Undvik cirkulärt beroende
CSS presenterar innehåll i block staplade vertikalt på sidan, så bredden på ett block bestäms vanligtvis helt av bredden på dess överordnade. Du kan med andra ord beräkna bredden på ett block utan att oroa dig för vad blocket är.
Höjden på ett block är en annan sak. I allmänhet höjden Det beror på den kombinerade höjden på ditt innehåll.. Ändra höjden på innehållet så ändras höjden på blocket. Ser du problemet?
För att få höjden på innehållet måste du känna till de övre och nedre marginalerna som tillämpas på det. Och om dessa marginaler beror på höjden på huvudblocket, har du problem, eftersom du inte kan beräkna det ena utan att känna till det andra!
Att basera de vertikala marginalerna på formen på behållaren bryter det cirkulära beroendet och låter dig layouta sidan.
