Mida te ei tea protsendimarginaalide arvutamisest CSS-is
Enamik veebidisainereid arvavad, et nad teavad CSS-i päris hästi. Lõppude lõpuks ei ole seda nii palju - mõningaid valijatüüpe, paar tosinat omadust ja mõningaid kaskaadreegleid, mida peate vaevalt meeles pidama, sest nad keedavad tervet mõistust. Aga kui jõuad nitty-gritty tasemele, on palju ebamääraseid detaile, mida mõned disainerid tõesti mõistavad.
Kui ma uurisin tasuta CSS-i testi tulemusi, mida ma olen viimase kuue kuu jooksul võrgus pakkunud, avastasin üks küsimus, mis peaaegu mitte keegi sain õigesti. Testi tuhandetest inimestest, vähem kui 14% sai seda õigesti.
Küsimus kerkib sellele: Kuidas arvutate protsendimarginaale?
Küsimus
Ütle, et teie saidil on konteiner div, ja selle sees, sisu div:
Nüüd anname selle sisu div ülemine varu:
.sisu margin-top: 10%;
Okei, seega on see 10% ... aga 10% mida? See on see küsimus ainult 13,8% inimestest saab õigesti vastata. Ja pidage meeles: neil inimestel on juurdepääs Google'ile!
See, mida ma selles küsimuses armastan, on see tundub, et vastus peaks olema ilmne. Nii palju, et ma kahtlustan, et enamik inimesi lihtsalt arvab (ja arvab valesti). Aga võib-olla ei ole tundub teile ilmselge. Ma mõtlen, et kui sa oma kujutlusvõimet tõesti kasutad, siis on brauseril palju võimalusi arvutada selline marginaal.
Niisiis, kuidas siis, kui ma seda kitsendaksin, sest testis olev küsimus on tegelikult mitmekordne valik. Siin on teie valikud:
- 10% sisust div kõrgusest
- 10% konteineri div kõrgusest
- 10% sisust div laiusest
- 10% konteineri div laiusest
Pidage meeles, et ainult 13,8% inimestest saab sellest nimekirjast õige vastuse valida. See on hullem kui võimalus!
Vaadake tähelepanelikult vastuseid; näete, et on tõesti ainult kaks asja, mida pead teadma:
Konteiner või sisu?
Esiteks on marginaali suurus, mis põhineb sisulõigu suurusel või konteineri div?
Nüüd ei ole see gimme, aga võite usaldada oma instinkte. Kui ma määran, et div on 50% oma konteineri laiusest, ja siis tahan, et tema vasak- ja parempoolsed margid täidaksid ülejäänud ruumi, määraksin need loomulikult 25% -ni (nii et protsendid lisavad kuni 100%). Selleks, et töötada, peavad protsendimarginaalid põhinema mahuti mõõtmetel.
Muidugi, kaks kolmandikku testist võtnud inimestest saavad selle osa vastusest.
Laius või kõrgus?
Teiseks, on marginaali kõrgus selle elemendi laiuse või kõrguse alusel?
Kui olete tähelepanu pööranud, oled sa ilmselt juba teie valvur. Nii vähe inimesi, et valida õige vastus, peab see olema trikkküsimus?
Ja veel, vean kihla, et vőid seda vaevalt uskuda vastus ei ole kõrgus. Noh, see pole.
Jah, me räägime siin ülemisest marginaalist. Jah, selle marginaali suurus on vertikaalne. Jah, kui plokk on 50% konteineri kõrgusest ja te andsite talle 25% ülemise varu, siis eeldate, et see on 25% konteineri kõrgusest.. Ja sa oleksid valed.
Ära tunne end halvasti, kui arvasite, et see peab olema kõrgus. Ligikaudu 80% inimestest, kes katseid teevad, nõustuvad teiega:
See teeb mõttes ... Ei, tõesti!
Ikka ei usu seda? Siin on tsiteeritud W3C CSS-i spetsifikatsioon:
Protsent arvutatakse genereeritud kasti sisaldava ploki laiuse suhtes. Pange tähele, et see kehtib ka marginaali ja marginaali alumise kohta.
Sama kehtib ka ülemise ja alumise polsterdusega, kui te mõtlesite. Piiride puhul on nende laius protsendina ebaseaduslik.
Nii et siinkohal mõtlete sa arvatavasti ka CSSi loojaid bonkers, või nad lihtsalt tegid tõesti lolliku vea. Aga ma olen siin, et teile öelda, on kaks head põhjust, miks vertikaalsed marginaalid peavad sisaldama bloki laiust:
Horisontaalne ja vertikaalne kooskõla
Loomulikult on olemas stenogramm, mis võimaldab teil määrata ploki kõigi nelja külje varu:
varu: 10%;
See laieneb:
margin-top: 10%; marginaal-parem: 10%; marginaal-alumine: 10%; marginaal vasakule: 10%;
Nüüd, kui kirjutasite kumbagi ülaltoodust, eeldate tõenäoliselt, et ploki kõigi nelja külje marginaalid on võrdse suurusega, kas pole? Aga kui marginaal-vasak ja marginaal-parem põhinesid konteineri laiusel ja marginaal-ülemine ja alumine serv põhinesid selle kõrgusel, siis nad oleksid tavaliselt erinevad!
Ümmarguse sõltuvuse vältimine
CSS sätestab sisu plokkides, mis on paigutatud vertikaalselt allapoole lehekülge, nii et ploki laius sõltub tavaliselt täielikult tema vanema laiusest. Teisisõnu, saate arvuta ploki laius, ilma et peaksite muretsema selle pärast, mis on sees see plokk.
Ploki kõrgus on erinev asi. Tavaliselt kõrgus sõltub selle sisu kombineeritud kõrgusest. Muuda sisu kõrgust ja muuta ploki kõrgust. Vaadake probleemi?
Sisu kõrguse saamiseks peate teadma sellele rakendatud ülemise ja alumise marginaali. Ja kui need marginaalid sõltuvad vanembloki kõrgusest, on teil hädas, sest te ei saa teist ilma arvata!
Vertikaalsete marginaalide baasil laius mahuti puruneb selle ümmarguse sõltuvuse ja võimaldab lehekülje paigutamist.
Ace klass
Nii et teil on see: kõige raskem küsimus testis ja nüüd saate sellele vastata. Tahad teada, kuidas te teete ülejäänud testi? Proovige seda ise. Ma luban, et enamik küsimusi on palju lihtsam kui see.
Vahepeal ma otsin uut raskemat küsimust! Millist CSS-i üksikasju te arvate, et keegi ei tea?
Toimetaja märkus: See on kirjutatud Hongkiat.com-le Kevin Yank. Kevin on kirjutanud veebist alates 1999. aastast, kus on tema nimele kirjutatud PHP, CSS ja JavaScript. Samuti on ta veebis korraldanud konverentsidel kõneldavaid podcaste ja videotreeninguid. Nüüd juhib ta Sit-Test'i veebirakenduse veebipõhise testimise arendamise meeskonda.
Veel Hongkiatist:
- Veebidisain: võrdne veeru kõrgus CSS-iga
- 6 CSS trükki sisu vertikaalseks joondamiseks
- CSS-ühikute vaatamine: pikslid, EM ja protsent
- Vaata: CSS3 kasti suurus
Nüüd loe: 10 Varjatud CSS3 omadusi, mida peaksite teadma
