Ką nežinote, kaip apskaičiuoti procentinę maržą CSS
Dauguma žiniatinklio dizainerių mano, kad jie puikiai žino CSS. Galų gale, tai nėra taip daug - keletas pasirinkimo tipų, kelios dešimtys savybių ir kai kurios pakopinės taisyklės, kurių vos reikia prisiminti, nes jos virsta sveiku protu. Bet kai jūs nuvažiuojate į nekintamą lygį, yra daug neaiškių detalių, kurias nedaugelis dizainerių tikrai supranta.
Ištyręs nemokamų CSS testų, kuriuos pasiūliau internete per pastaruosius šešis mėnesius, rezultatus vienas klausimas, kad beveik Niekas teisus. Iš tūkstančių žmonių, kurie paėmė testą, mažiau nei 14% gavo teisę.
Kyla klausimas: Kaip apskaičiuojate procentinę maržą?
Klausimas
Pasakykite, kad jūsų svetainėje yra talpykla div, ir viduje, turinys div:
Dabar duokime šį turinį div viršutinė marža:
.turinys margin-top: 10%;
Gerai, taigi tai yra 10% ... bet 10% ką? Tai yra klausimas tik 13,8% žmonių gali atsakyti teisingai. Ir nepamirškite: šie žmonės turi prieigą prie „Google“!
Ką aš myliu apie šį klausimą yra tai, kad atrodo, kad atsakymas turėtų būti akivaizdus. Tiek daug, kad įtariu, kad dauguma žmonių tiesiog atspėti (ir atspėti neteisingai). Bet gal tai ne jums atrodo akivaizdus. Aš turiu galvoje, jei iš tikrųjų naudojate savo vaizduotę, yra daug būdų, kaip naršyklė galėtų apskaičiuoti tokią maržą.
Taigi, kaip apie tai, jei aš jį susiaurinu, nes testo klausimas iš tikrųjų yra daugialypis pasirinkimas. Štai jūsų parinktys:
- 10% turinio div aukščio
- 10% konteinerio div aukščio
- 10% turinio div pločio
- 10% konteinerio disko pločio
Atminkite, kad tik 13,8% žmonių gali pasirinkti tinkamą atsakymą iš šio sąrašo. Tai blogiau nei tikimybė!
Pažvelkite į atsakymus; pamatysite, kad tikrai yra tik du dalykai, kuriuos reikia žinoti:
Konteineris arba turinys?
Pirma, yra maržos dydis, pagrįstas paties turinio dydžiu arba konteinerio dalimi?
Dabar tai nėra gimme, bet tikriausiai galite pasitikėti savo instinktais. Jei aš nustatysiu, kad divas yra 50% jo talpyklos pločio, ir tada noriu, kad jo kairiosios ir dešinės paraštės užpildytų likusį erdvės plotą, aš natūraliai juos nustatyčiau iki 25% (taigi procentai prideda iki 100%). Kad tai veiktų, procentinės maržos turi būti pagrįstos konteinerio matmenimis.
Žinoma, du trečdaliai žmonių, kurie imasi testo, gauna šią atsakymo dalį.
Plotis arba aukštis?
Antra, yra ribos viršūnės dydis, atsižvelgiant į šio elemento plotį arba aukštį?
Jei atkreipėte dėmesį, jūs tikriausiai jau esate savo sargyboje. Kad tiek mažai žmonių galėtų pasirinkti teisingą atsakymą, tai turi būti triksas klausimas, tiesa?
Ir vis dėlto bet aš galiu tikėtis, kad tai vos tikite atsakymas ne aukštis. Na, tai ne.
Taip, čia kalbame apie viršutinę ribą. Taip, šios maržos dydis yra vertikalus. Taip, jei blokas yra 50% konteinerio aukščio, ir suteikėte jam 25% viršutinę ribą, tikitės, kad tai bus 25% konteinerio aukščio.. Ir tu esi neteisingas.
Nesijaudinkite, jei manote, kad jis turi būti aukštis. Beveik 80% žmonių, kurie imasi testo, sutinka su jumis:
Tai daro prasmę… Ne, Tikrai!
Vis dar netikiu? Čia yra citata iš W3C CSS specifikacijos:
Procentinė dalis apskaičiuojama pagal generuojamo langelio turinio bloko plotį. Atkreipkite dėmesį, kad tai pasakytina ir apie „margin-top“ ir „margin-bottom“.
Tas pats pasakytina apie viršutinę ir apatinę paminkštinimą, jei manote, kad tai yra. Kalbant apie sienas, neteisėta nurodyti jų plotį procentais.
Taigi šiuo metu jūs tikriausiai galvojate apie CSS kūrėjus bonkers, arba jie tiesiog padarė klaidingą klaidą. Bet aš čia noriu pasakyti, kad yra dvi geros priežastys, dėl kurių vertikalios paraštės turi būti grindžiamos bloko pločiu:
Horizontalus ir vertikalus nuoseklumas
Žinoma, yra trumpalaikis turtas, leidžiantis nurodyti visų keturių bloko pusių ribą:
marža: 10%;
Tai plečiasi į:
margin-top: 10%; paraštė dešinėje: 10%; paraštės apačia: 10%; maržos kairėje: 10%;
Dabar, jei parašėte vieną iš pirmiau minėtų dalykų, tikriausiai tikitės, kad visų keturių bloko pusių paraštės būtų vienodo dydžio, ar ne? Bet jei margas-kairė ir paraštė-dešinė buvo paremtos konteinerio pločiu, o maržos viršutinė ir paraštė-apačia buvo grindžiama jo aukščiu, tada jie paprastai būna skirtingi!
Apskrito priklausomybės vengimas
CSS išdėsto turinį blokuose, kurie yra sukrauti vertikaliai žemyn puslapyje, todėl bloko plotis paprastai yra visiškai diktuojamas pagal jo tėvų plotį. Kitaip tariant, galite apskaičiuokite bloko plotį nesirūpindami, kas yra viduje tą bloką.
Bloko aukštis yra kitoks dalykas. Paprastai aukštis priklauso nuo bendro jo turinio aukščio. Pakeiskite turinio aukštį ir pakeiskite bloko aukštį. Žiūrėti problemą?
Norėdami gauti turinio aukštį, turite žinoti viršutines ir apatines paraštes, kurios yra taikomos. Ir jei šios maržos priklauso nuo patronuojančio bloko aukščio, esate bėdoje, nes jūs negalite apskaičiuoti vieno, nežinant kito!
Vertikalios paraštės plotis konteineris pertraukia tą apykaitinę priklausomybę ir leidžia išdėstyti puslapį.
Ace klasė
Taigi jūs turite tai: sunkiausias klausimas dėl bandymo, ir dabar jūs galite atsakyti. Norite žinoti, kaip darote likusį testą? Išbandykite save. Pažadu, kad dauguma klausimų yra daug lengviau nei šis.
Tuo tarpu aš ieškoju naujo sunkiausio klausimo! Kokia CSS informacija, jūsų manymu, niekas nežino?
Redaktoriaus pastaba: Tai parašyta „Hongkiat.com“ Kevin Yank. Nuo 1999 m. Kevinas parašė žiniatinklį apie knygas apie PHP, CSS ir JavaScript. Jis taip pat surengė internetinius pokalbius, kuriuose kalbama konferencijose, ir rengė vaizdo mokymus. Dabar jis vadovauja „Sit the Test“ kūrimo komandai, žiniatinklio programai, skirtai internetiniams testams atlikti.
Daugiau apie „Hongkiat“:
- Web dizainas: vienodas stulpelio aukštis su CSS
- 6 CSS gudrybės, skirtos vertikaliai suderinti turinį
- Pažvelgti į CSS vienetus: pikselius, EM ir procentą
- Žvilgsnis į CSS3 langelį
Dabar perskaitykite: 10 paslėptų CSS3 savybių, kurias turėtumėte žinoti
