Mitä et tiedä laskemasta prosenttimarginaaleja CSS ssä
Useimmat web-suunnittelijat ajattelevat tuntevansa CSS: n hyvin. Loppujen lopuksi siihen ei ole kovinkaan paljon - muutamia valintatyyppejä, muutamia kymmeniä ominaisuuksia ja joitakin porrastettuja sääntöjä, joita sinun ei tarvitse muistaa, koska ne kiehuvat terveen järkeen. Mutta kun pääset alittavaan tasoon, on paljon hämäriä yksityiskohtia, joita harvat suunnittelijat todella ymmärtävät.
Kun tutkin ilmaisen CSS-testin tuloksia, jotka olen tarjonnut verkossa viimeisten kuuden kuukauden aikana, huomasin yksi kysymys, että melkein ei kukaan sai oikean. Tuhannet ihmiset, jotka ottivat testin, vähemmän kuin 14% sai sen oikein.
Kysymys heijastuu tähän: Kuinka lasket prosenttimarginaalit?
Kysymys
Sano, että sivustossasi on kontti div, ja sen sisällä, sisältö div:
Anna nyt tämä sisältö div ylimmän marginaalin:
.sisältö margin-top: 10%;
Okei, joten se on 10%… mutta 10% mitä? Se on kysymys vain 13,8% ihmisistä voi vastata oikein. Pidä mielessä: näillä ihmisillä on pääsy Googleen!
Se, mitä rakastan tästä kysymyksestä, on se tuntuu siltä, että vastauksen pitäisi olla ilmeinen. Niin paljon, että epäilen, että useimmat ihmiset ottavat arvailun (ja arvailevat väärin). Mutta ehkä se ei tuntuu selvältä. Tarkoitan, että jos käytät mielikuvitusta, selaimella on monia tapoja laskea tällainen marginaali.
Entä siis, jos kavennan sitä alaspäin, koska testissä oleva kysymys on itse asiassa monivalinta. Seuraavassa on vaihtoehdot:
- 10% sisällön divin korkeudesta
- 10% kontin divin korkeudesta
- 10% sisällön divin leveydestä
- 10% kontin divin leveydestä
Muista, että vain 13,8% ihmisistä voi valita oikean vastauksen tästä luettelosta. Se on niin huonompi kuin mahdollisuus!
Katso tarkasti vastauksia; näet, että on todella vain kaksi asiaa, jotka sinun täytyy tietää:
Kontti tai sisältö?
Ensinnäkin marginaalin koko, joka perustuu itse sisällön kokoon tai kontin div?
Nyt tämä ei ole gimme, mutta voit luottaa vaistoihisi. Jos asetan div: n 50%: iin sen säiliön leveydestä, ja sitten haluan sen vasemman ja oikean reunan täyttää muun tilan, olisin luonnollisesti asettanut ne 25%: iin (niin, että prosenttiosuudet lisäävät 100%). Tätä varten prosentuaaliset marginaalit on perustuttava säiliön mittoihin.
Tosiaan, kaksi kolmasosaa testistä otetuista saa tämän osan vastauksesta.
Leveys tai korkeus?
Toinen, on marginaalin koko sen elementin leveyden tai korkeuden perusteella?
Jos olet kiinnittänyt huomiota, olet todennäköisesti jo vartijasi. Jotta vain harvat ihmiset voisivat valita oikean vastauksen, tämän täytyy olla huijauskysymys, oikea?
Ja vielä, vedän, että voitte tuskin uskoa sitä vastaus ei ole korkeus. No, se ei ole.
Kyllä, puhumme tästä ylimmästä marginaalista. Kyllä, kyseisen marginaalin koko on pystysuora mitta. Kyllä, jos lohko on 50% sen säiliön korkeudesta, ja annoit sille 25%: n ylimmän marginaalin, oletat, että se on 25% kontin korkeudesta. Ja olisit väärässä.
Älä tunne pahaa, jos luulit sen olevan korkeus. Lähes 80% testin tekijöistä on kanssanne samaa mieltä:
Se tekee vaikutuksen… Ei, todella!
En silti usko sitä? Tässä on lainaus W3C CSS -määrityksestä:
Prosenttiosuus lasketaan generoidun laatikon sisältävän lohkon leveyden suhteen. Huomaa, että tämä pätee myös marginaalin ja marginaalin pohjaan.
Sama pätee ylä- ja alareunaan, jos olet miettinyt. Rajojen osalta on laitonta määrittää niiden leveys prosentteina.
Joten tässä vaiheessa olet luultavasti ajatellut CSS: n luojat hullu, tai he vain tekivät todella typerän virheen. Mutta olen täällä kertoa teille, on kaksi syytä perustella pystysuorat marginaalit sisältävän lohkon leveydelle:
Vaaka- ja pystysuora yhdenmukaisuus
On tietenkin lyhytominaisuus, jonka avulla voit määrittää marginaalin lohkon kaikille neljälle puolelle:
marginaali: 10%;
Tämä laajenee:
marginaali: 10%; marginaali-oikea: 10%; marginaali-pohja: 10%; marginaali-vasen: 10%;
Jos olet kirjoittanut jompikumpi edellä mainituista, olette todennäköisesti odottaneet, että lohkon kaikkien neljän puolen marginaalit ovat yhtä suuria, eikö olekin? Mutta jos marginaali-vasen ja marginaali-oikeus perustuivat säiliön leveydelle, ja marginaalin ylä- ja reunapohjat perustuivat sen korkeuteen, niin he olisivat yleensä erilaiset!
Pyöreän riippuvuuden välttäminen
CSS esittää sisällön lohkoissa, jotka on pinottu pystysuunnassa alas sivulle, joten lohkon leveys määräytyy yleensä kokonaan sen vanhemman leveyden mukaan. Toisin sanoen, voit laske lohkon leveys huolimatta siitä, mikä on sisällä että lohko.
Lohkon korkeus on eri asia. Yleensä korkeus riippuu sen sisällön yhdistetystä korkeudesta. Muuta sisällön korkeutta ja muutat lohkon korkeutta. Katso ongelma?
Saadaksesi sisällön korkeuden, sinun on tiedettävä sille asetetut ylä- ja alareunat. Ja jos nämä marginaalit riippuvat emoyksikön korkeudesta, olet vaikeuksissa, koska et voi laskea yhtä tietämättä toista!
Vertikaalisten marginaalien perustaminen leveys säiliön katkeaminen rikkoo tämän pyöreän riippuvuuden ja mahdollistaa sivun asettamisen.
Ace luokkaa
Joten sinulla on se: koettelemus on kovin kysymys, ja nyt voit vastata siihen. Haluatko tietää, miten teet testin loppuosan? Kokeile sitä itse. Lupaan, että suurin osa kysymyksistä on paljon helpompaa kuin tämä.
Samaan aikaan olen etsimässä uutta kovinta kysymystä! Mitä yksityiskohtia CSS: stä luulet, että kukaan ei tiedä?
Toimittajan huomautus: Tämä on kirjoitettu Hongkiat.comille Kevin Yank. Kevin on kirjoittanut verkosta vuodesta 1999 lähtien, jossa on kirjoja PHP: stä, CSS: stä ja JavaScriptistä. Hän on myös isännöinyt podcasteja, jotka on puhuttu konferensseissa, ja tuottanut videokuvaa. Nyt hän johtaa kehitystiimiä Sit the Testissä, web-sovelluksen online-testien tekemiseen ja ottamiseen.
Lisää Hongkiatista:
- Web-suunnittelu: Tasapuolinen sarakekorkeus CSS: llä
- 6 CSS-temppua sisällön kohdistamiseksi pystysuoraan
- Look Into CSS -yksiköt: pikselit, EM ja prosenttiosuus
- Look Into: CSS3-laatikon koko
Lue nyt: 10 piilotettua CSS3-ominaisuutta, jotka sinun pitäisi tietää
