Ce nu știți despre calculul marjelor procentuale în CSS

Majoritatea designerilor web cred că știu destul de bine CSS. La urma urmei, nu este atât de mult pentru asta - câteva tipuri de selectori, câteva duzini de proprietăți și câteva reguli cascadate pe care abia trebuie să le ții minte, deoarece acestea se aruncă la bunul simț. Dar când coborâți la nivelul nisipului, există o mulțime de detalii obscure pe care unii designeri le înțeleg cu adevărat.

Când am examinat rezultatele unui test CSS gratuit pe care l-am oferit online pentru ultimele șase luni, am descoperit o întrebare care aproape nimeni are dreptate. Dintre mii de oameni care au luat testul, mai puțin de 14% au reușit.

Întrebarea se reduce la: Cum calculați marjele procentuale?

Intrebarea

Spuneți că site-ul dvs. are un container div, și în interiorul său, un conținut div:

Acum, să dăm acel conținut div o margine de top:

.conținut margin-top: 10%;  

Bine, deci este 10% ... dar 10% din ce? Asta e întrebarea asta doar 13,8% dintre persoane pot răspunde corect. Și rețineți: acești oameni au acces la Google!

Ceea ce îmi place despre această întrebare este asta se pare că răspunsul ar trebui să fie evident. Atât de mult, încât bănuiesc că cei mai mulți oameni iau o presupunere (și ghicesc greșit). Dar poate că nu ți se pare evident. Adică, dacă îți folosești cu adevărat imaginația, există multe moduri în care browserul ar putea calcula o marjă ca asta.

Deci, ce-ar fi dacă am îngustat-o ​​pentru tine, deoarece întrebarea din test este de fapt o alegere multiplă. Iată opțiunile dvs.:

• 10% din înălțimea conținutului div
• 10% din înălțimea containerului div
• 10% din lățimea divului conținutului
• 10% din lățimea containerului div

Rețineți că doar 13,8% dintre persoane pot alege răspunsul potrivit din această listă. Este mult mai rău decât întâmplător!

Priviți cu atenție răspunsurile; veți vedea că există doar două lucruri pe care trebuie să le cunoașteți:

Container sau Conținut?

Mai întâi, este marimea marjei bazată pe mărimea conținutului însuși sau pe dimensiunea containerului div?

Acum nu este un gimme, dar probabil că ai încredere în instinctele tale. Dacă am setat un div pentru a fi de 50% din lățimea containerului și apoi vreau ca marginile stânga și dreapta să umple restul spațiului, le-aș fi stabilit în mod natural la 25% fiecare (deci procentele ajung până la 100%). Pentru ca aceasta să funcționeze, marjele procentuale trebuie să se bazeze pe dimensiunile containerului.

Destul de sigur, două treimi dintre persoanele care iau testul primesc această parte a răspunsului drept.

Lățime sau înălțime?

Al doilea, este mărimea marjei de vârf în funcție de lățimea sau înălțimea elementului respectiv?

Dacă ați fost atenți, sunteți deja în gardă. Pentru atât de puțini oameni să aleagă răspunsul corect, trebuie să fie o întrebare truc, bine?

Și totuși, pariez că abia te poți crede răspunsul nu este înălţime. Ei bine, nu este.

Da, vorbim despre o margine de top aici. Da, marimea acestei marje este o măsurare verticală. Da, dacă un bloc este de 50% din înălțimea recipientului și i-ai dat o marjă de top de 25%, te-ai aștepta să fie de 25% din înălțimea containerului. Și ați greșit.

Nu vă simțiți rău dacă credeți că trebuie să fie înălțime. Aproape 80% dintre cei care iau testul sunt de acord cu tine:

Are sens ... Nu, chiar!

Tot nu crezi? Iată un citat din spec. W3C CSS:

Procentajul este calculat în funcție de lățimea blocului care conține cutia generată. Rețineți că acest lucru este valabil și pentru marginea superioară și pentru marginea inferioară.

Același lucru este valabil și pentru căptușelile de sus și de jos, în cazul în care vă întrebați. În ceea ce privește granițele, este ilegală specificarea lățimii lor ca procentaj.

Deci, în acest moment, probabil că te gândești și la creatorii de CSS razna, sau au făcut doar o greșeală cu adevărat prost. Dar eu sunt aici să vă spun, există două motive bune pentru a baza marginile verticale pe lățimea blocului care conține:

Consistența orizontală și verticală

Există, bineînțeles, o proprietate de sintagmă care vă permite să specificați marja pentru toate cele patru laturi ale unui bloc:

marja: 10%;

Aceasta se extinde la:

marginea superioară: 10%; marginea-dreapta: 10%; marginea inferioară: 10%; marginea-stânga: 10%;

Acum, dacă ați scris oricare dintre cele de mai sus, probabil că vă așteptați ca marginile de pe cele patru laturi ale blocului să aibă aceeași dimensiune, nu-i așa? Dar dacă marginea-stânga și marginea dreaptă s-au bazat pe lățimea containerului, iar marginea de sus și marginea inferioară s-au bazat pe înălțimea sa, atunci acestea ar fi de obicei diferite!

Evitarea dependenței circulare

CSS stabilește conținutul în blocuri stivuite vertical pe pagină, astfel încât lățimea unui bloc este, de obicei, dictată în întregime de lățimea părintelui său. Cu alte cuvinte, puteți calcula lățimea unui bloc fără să vă faceți griji despre ce este interior care blochează.

Înălțimea unui bloc este o problemă diferită. De obicei, înălțimea depinde de înălțimea combinată a conținutului său. Modificați înălțimea conținutului și schimbați înălțimea blocului. Vedeți problema?

Pentru a obține înălțimea conținutului, trebuie să cunoașteți marginile de sus și de jos care sunt aplicate. Și dacă aceste marje depind de înălțimea blocului părinte, aveți probleme, pentru că nu puteți calcula unul fără a cunoaște celălalt!

Se bazează margini verticale pe lăţime a containerului sparge această dependență circulară și face posibilă întinderea paginii.

Acea clasă

Deci, tu o ai: cea mai grea întrebare despre test și acum poți răspunde. Vrei să știi cum ai face în restul testului? Incearca-l tu insuti. Promit, majoritatea întrebărilor sunt mult mai ușor decât acesta.

Între timp, eu sunt în căutare de o nouă întrebare mai dură! Ce detaliu al CSS credeți că nimeni nu știe?

Nota editorului: Acest lucru este scris pentru Hongkiat.com de către Kevin Yank. Kevin a scris despre web din 1999, cu cărți despre PHP, CSS și JavaScript în numele său. De asemenea, a găzduit podcast-uri, a vorbit la conferințe și a produs formare video, totul despre Web. El conduce acum echipa de dezvoltare la Sit the Test, o aplicație web pentru efectuarea și testarea online.

Mai multe despre Hongkiat:

• Web Design: Înălțimea coloanei egale cu CSS
• 6 trucuri CSS pentru alinierea conținutului vertical
• O privire în unități CSS: Pixeli, EM și Procentaj
• O privire în: dimensiunea cutiei CSS3

Citiți acum: 10 proprietăți ascunse CSS3 trebuie să știți