Hva du ikke vet om beregning av prosentmarginer i CSS
De fleste webdesignere tror de vet CSS ganske bra. Tross alt er det ikke så mye med det - noen valgtyper, noen få dusin egenskaper, og noen kaskaderegler som du knapt trenger å huske siden de koker ned til sunn fornuft. Men når du kommer til det nitty-gritty nivået, er det mange uklare detaljer som få designere virkelig forstår.
Da jeg undersøkte resultatene av en gratis CSS-test jeg har tilbudt online de siste seks månedene, oppdaget jeg et spørsmål som nesten ingen har rett. Av de tusenvis av mennesker som tok testen, færre enn 14% fikk det riktig.
Spørsmålet koker ned til dette: Hvordan beregner du prosentvis marginer?
Spørsmålet
Si at nettstedet ditt har en container div, og inne i det, et innhold div:
La oss nå gi det innholdet div en toppmargin:
.innhold margin-top: 10%;
Ok, så er det 10% ... men 10% av hva? Det er spørsmålet det bare 13,8% av folkene kan svare riktig. Og husk: Disse personene har tilgang til Google!
Det jeg elsker om dette spørsmålet er det Det virker som svaret skal være åpenbart. Så mye, at jeg mistenker at de fleste bare tar et gjetning (og gjett feil). Men kanskje det ikke virker åpenbart for deg. Jeg mener, hvis du virkelig bruker fantasien din, er det mange måter nettleseren kan tenke på å beregne en margin som dette.
Så hva med om jeg begrenser det for deg siden spørsmålet i testen er faktisk flere valg. Her er alternativene dine:
- 10% av innholdsdelens høyde
- 10% av container div er høyde
- 10% av innholdets div er bredde
- 10% av container div er bredde
Husk at bare 13,8% av folk kan velge riktig svar fra denne listen. Det er verre enn sjansen!
Se nøye på svarene; du ser det er egentlig bare to ting du trenger å vite:
Container eller innhold?
Først er det størrelsen på marginen basert på størrelsen på innholdet div selv, eller på størrelsen på container div?
Nå er dette ikke et gimme, men du kan sannsynligvis stole på dine instinkter. Hvis jeg setter en div til 50% av bredden på beholderen, og da vil jeg ha venstre og høyre margin for å fylle resten av plassen, jeg ville naturlig sett sette dem til 25% hver (så prosentene legger til 100%). For at det skal fungere, må prosentmarginene baseres på beholderens dimensjoner.
Sikkert nok, to tredjedeler av de som tar testen, får denne delen av svaret riktig.
Bredde eller Høyde?
Sekund, er marginens størrelse basert på bredden eller høyden til elementet?
Hvis du har vært oppmerksom, er du sannsynligvis på vakt allerede. For så få mennesker å velge riktig svar, må dette være et triks spørsmål, riktig?
Og likevel, jeg vedder på at du nesten ikke kan tro det svaret er ikke høyde. Vel, det er det ikke.
Ja, vi snakker om en toppmargin her. Ja, størrelsen på denne marginen er en vertikal måling. Ja, hvis en blokk er 50% av høyden på beholderen, og du ga den en toppmargin på 25%, vil du forvente at det skal være 25% av beholderens høyde. Og du ville ha feil.
Ikke føl deg dårlig hvis du trodde det måtte være høyde. Nesten 80% av de som tar testen, er enige med deg:
Det gjør mening ... Nei, egentlig!
Tror det fortsatt ikke? Her er et sitat fra W3C CSS-spesifikasjonen:
Prosentdelen beregnes med hensyn til bredden på den genererte boksens inneholdende blokk. Legg merke til at dette også gjelder for margin-topp og margin-bunn.
Det samme gjelder for topp og nederste polstring, i tilfelle du lurte på. Når det gjelder grenser, er det ulovlig å spesifisere bredden i prosent.
Så på dette tidspunktet tenker du sannsynligvis at skaperne av CSS er enten bonkers, eller de gjorde bare en veldig dum feil. Men jeg er her for å fortelle deg at det er to gode grunner til å basere vertikale marginer på bredden av den inneholdende blokken:
Horisontal og vertikal konsistens
Det er selvfølgelig en shorthand-egenskap som lar deg angi marginen for alle fire sider av en blokk:
margin: 10%;
Dette utvides til:
margin-topp: 10%; margin-høyre: 10%; margin-bunn: 10%; margin-venstre: 10%;
Nå, hvis du skrev noen av de ovennevnte, ville du trolig forvente at margenene på alle fire sider av blokken skulle være like store, ikke sant? Men hvis margin-venstre og margin-høyre var basert på beholderens bredde, og margin-topp og margin-bunn var basert på høyden, ville de vanligvis være forskjellige!
Unngå sirkulær avhengighet
CSS legger ut innhold i blokker stablet vertikalt nedover siden, så bredden av en blokk er vanligvis diktert helt av bredden av sin overordnede. Med andre ord kan du beregne bredden på en blokk uten å bekymre deg for hva som er innsiden den blokken.
Høyden på en blokk er en annen sak. Vanligvis høyden Avhenger av den samlede høyden av innholdet. Endre høyden på innholdet, og du endrer blokkens høyde. Se problemet?
For å få innholdets høyde må du vite topp- og bunnmarginene som brukes på den. Og hvis disse marginene er avhengige av høyden på foreldreblokken, er du i trøbbel, fordi du ikke kan beregne en uten å kjenne den andre!
Basere vertikale marginer på bredde av beholderen bryter den sirkulære avhengigheten, og gjør det mulig å legge ut siden.
Ess klassen
Så der har du det: det vanskeligste spørsmålet på testen, og nå kan du svare på det. Vil du vite hvordan du vil gjøre på resten av testen? Prøv det selv. Jeg lover at de fleste spørsmålene er mye enklere enn dette.
I mellomtiden er jeg på jakt etter et nytt vanskeligste spørsmål! Hvilken detalj av CSS tror du ingen vet?
Redaktørens notat: Dette er skrevet for Hongkiat.com av Kevin Yank. Kevin har skrevet om nettet siden 1999, med bøker på PHP, CSS og JavaScript til navnet hans. Han er også vert for podcaster, talt på konferanser, og produsert videoopplæring, alt om nettet. Han leder nå utviklingslaget på Sit the Test, en webapplikasjon for å lage og ta online-tester.
Mer om Hongkiat:
- Webdesign: Lik kolonnehøyde med CSS
- 6 CSS triks for å justere innholdet vertikalt
- En titt på CSS-enheter: piksler, EM og prosentandel
- En titt på: CSS3 Box-dimensjonering
Nå Les: 10 Skjulte CSS3 egenskaper du bør vite
