Vad du inte vet om att beräkna procentandelar i CSS
De flesta webbdesigners tycker att de vet CSS ganska bra. Det är trots allt inte så mycket för det - några selektortyper, några dussinegenskaper och några kaskadregler som du knappt behöver komma ihåg eftersom de kokar ner till sunt förnuft. Men när du kommer ner till den nitty-gritty nivån, det finns massor av dunkla 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 ingen har rätt. Av de tusentals människor som tog testet, färre än 14% har det rätt.
Frågan pekar på detta: Hur beräknar du procentandelar?
Frågan
Säg att din webbplats har en behållare div, och inne i det, ett innehåll div:
Nu, låt oss ge det innehållet div en övre marginal:
.innehåll margin-top: 10%;
Okej, så är det 10% ... men 10% av Vad? Det är frågan som bara 13,8% av personerna kan svara korrekt. Och kom ihåg: dessa personer har tillgång till Google!
Vad jag älskar om den här frågan är det Det verkar som svaret borde vara uppenbart. Så mycket, att jag misstänker att de flesta bara tar en gissning (och gissar fel). Men kanske det inte verkar uppenbart för dig. Jag menar, om du verkligen använder din fantasi, finns det många sätt som webbläsaren kan tänka sig beräkna en sådan marginal.
Så vad sägs om jag förminskar det för dig eftersom frågan i testet är faktiskt flera val. Här är dina alternativ:
- 10% av innehållsdelens höjd
- 10% av container div är höjd
- 10% av innehållsdelens bredd
- 10% av behållarens divs bredd
Kom ihåg att endast 13,8% av personerna kan välja rätt svar från den här listan. Det är väldigt sämre än chansen!
Titta noga på svaren; du ser att det bara finns två saker du behöver veta:
Behållare eller innehåll?
Först är det storleken på marginalen baserad på innehållsdelarnas storlek, eller på storleken av container div?
Nu är det inte här, men du kan förmodligen lita på dina instinkter. Om jag sätter en div till 50% av behållarens bredd och då vill jag ha sina vänstra och högra marginaler för att fylla resten av utrymmet, så skulle jag naturligtvis ställa dem till 25% vardera (så procentsatserna lägger till 100%). För att kunna arbeta måste procentmarginalerna baseras på behållarens dimensioner.
Visst nog, två tredjedelar av de som tar provet får denna del av svaret rätt.
Bredd eller Höjd?
Andra, är marginal topp storlek baserat på bredden eller höjden på det elementet?
Om du har varit uppmärksam, är du förmodligen redan på vakt. För så få människor att välja rätt svar, måste det vara en knep fråga, rätt?
Och ändå, vad så är det att du knappt kan tro det svaret är inte höjd. Jo det är det inte.
Ja, vi pratar om en toppmarginal här. Ja, storleken på den marginalen är en vertikal mätning. Ja, om ett block är 50% av höjden på dess behållare, och du gav den en toppmarginal på 25%, skulle du förvänta dig att 25% av behållarens höjd är. Och du hade fel.
Känn inte dåligt om du trodde att det var höjd. Nästan 80% av de personer som tar testet är överens med dig:
Det gör känsla ... nej, verkligen!
Tror det fortfarande inte? Här är ett citat från W3C CSS-specifikationen:
Procentdelen beräknas med hänsyn till bredden på den genererade lådans innehållande block. Observera att detta gäller även margin-top och margin-bottom.
Detsamma gäller för topp och botten vaddering, om du undrar. När det gäller gränser är det olagligt att ange deras bredd i procent.
Så vid den här tiden tror du förmodligen att skaparna av CSS är heller bonkers, eller de gjorde 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 av det innehållande blocket:
Horisontell och vertikal konsistens
Det finns naturligtvis en stenografiegenskap som låter dig ange marginalen för alla fyra sidor av ett block:
marginal: 10%;
Detta expanderar till:
marginal-topp: 10%; marginal-höger: 10%; marginalbotten: 10%; marginal-vänster: 10%;
Nu, om du skrev något av ovanstående, skulle du förmodligen förvänta dig att marginalerna på alla fyra sidorna av blocket skulle vara lika stora, eller hur? Men om marginal-vänster och marginal-höger baserades på behållarens bredd och marginal-topp och marginal-botten var baserade på dess höjd, då skulle de vanligtvis vara annorlunda!
Undvik cirkulär beroende
CSS lägger ut innehåll i block staplade vertikalt nedåt på sidan, så bredden på ett block dikteras vanligtvis helt av bredden av dess förälder. Med andra ord kan du Beräkna bredden på ett block utan att oroa dig för vad som är inuti det blocket.
Blockens höjd är en annan sak. Vanligtvis höjden beror på den sammanlagda höjden av dess innehåll. Ändra höjden på innehållet och ändra längden på blocket. Se problemet?
För att få höjden på innehållet måste du veta de övre och nedre marginalerna som appliceras på den. Och om dessa marginaler beror på höjden på moderblocket är du i trubbel eftersom du inte kan beräkna en utan att känna till den andra!
Baserar vertikala marginaler på bredd av behållaren bryter det cirkulära beroendet och gör det möjligt att lägga ut sidan.
Ace klassen
Så där har du det: den svåraste frågan på testet, och nu kan du svara på det. Vill du veta hur du gör på resten av testet? Prova själv. Jag lovar, de flesta av frågorna är mycket enklare än den här.
Under tiden är jag på jakt efter en nyaste tuffaste fråga! Vilken detalj av CSS tror du att ingen vet?
Redaktörens anteckning: Detta är skrivet för Hongkiat.com av Kevin Yank. Kevin har skrivit om webben sedan 1999, med böcker om PHP, CSS och JavaScript till hans namn. Han är också värd för podsändningar, talade på konferenser och producerat videoträning, allt om webben. Han leder nu utvecklingslaget på Sit the Test, en webbapplikation för att göra och ta online-tester.
Mer om Hongkiat:
- Webbdesign: lika kolumnhöjd med CSS
- 6 CSS-trick för att justera innehållet vertikalt
- En titt på CSS-enheter: pixlar, EM och procentandel
- En titt på: CSS3 Box-dimensionering
Läs nu: 10 Dolda CSS3-egenskaper du borde veta
