Što ne znate o izračunavanju postotnih marži u CSS-u
Većina web dizajnera misli da dobro poznaju CSS. Uostalom, tu nema toliko toga - nekoliko tipova selektora, nekoliko desetaka svojstava i neka kaskadna pravila koja jedva trebate zapamtiti jer se svodi na zdrav razum. Ali kada se spustite na gustu razinu, postoji mnogo nejasnih detalja koje malo dizajnera doista razumije.
Kada sam pregledao rezultate besplatnog CSS testa koji sam ponudio na internetu posljednjih šest mjeseci, otkrio sam gotovo jedno pitanje nitko je dobio pravo. Od tisuća ljudi koji su polagali test, manje od 14% je to ispravilo.
Pitanje se svodi na ovo: Kako izračunati postotne marže?
Pitanje
Recite da vaša web-lokacija ima spremnik div, i unutar toga, sadržaj div:
Sada ćemo dati taj sadržaj div gornja margina:
.sadržaj margin-top: 10%;
Ok, znači 10%… ali 10% što? To je pitanje samo 13,8% ljudi može odgovoriti ispravno. Imajte na umu: ti ljudi imaju pristup Googleu!
Ono što volim kod ovog pitanja je to čini se da bi odgovor trebao biti očigledan. Toliko toga, da sumnjam da većina ljudi samo pretpostavlja (i pogriješi). Ali možda i to ne Čini vam se očitim. Mislim, ako stvarno koristite svoju maštu, postoji mnogo načina na koje preglednik može izračunati marginu poput ove.
Pa kako bi bilo da sam suzio za vas jer je pitanje u testu zapravo višestruki izbor. Ovdje su vaše opcije:
- 10% visine sadržaja div
- 10% visine kontejnera
- 10% širine dijela sadržaja
- 10% širine kontejnera
Zapamtite, samo 13,8% ljudi može odabrati pravi odgovor s ovog popisa. To je mnogo gore od slučajnosti!
Pogledajte pažljivo odgovore; vidjet ćete da doista postoje samo dvije stvari koje trebate znati:
Spremnik ili sadržaj?
Prvo je veličinu marže koja se temelji na veličini samog sadržaja sadržaja ili na veličini kontejnera div?
Ovo sada nije gimme, ali vjerojatno možete vjerovati svojim instinktima. Ako postavim div da bude 50% širine njegovog spremnika, a zatim želim da njegove lijeve i desne margine popune ostatak prostora, prirodno bih ih podesio na 25% svaki (tako da postoci zbrajaju 100%). Za to se postotak marže mora temeljiti na dimenzijama spremnika.
Dovoljno je sigurno da dvije trećine ljudi koji polože test dobiju ovaj dio odgovora.
Širina ili visina?
Drugi, je veličina margine-vrha na temelju širine ili visine tog elementa?
Ako ste obraćali pozornost, vjerojatno ste već na oprezu. Da bi tako malo ljudi odabralo pravi odgovor, to mora biti trik pitanje, zar ne?
A ipak, kladim se da to jedva možete vjerovati odgovor nije visina. Pa, nije.
Da, ovdje govorimo o gornjoj margini. Da, veličina te margine je okomito mjerenje. Da, ako je blok 50% visine njegovog spremnika, a vi ste mu dali gornju marginu od 25%, mogli biste očekivati da će biti 25% visine spremnika. I bio bi u krivu.
Nemojte se osjećati loše ako mislite da je to visina. Gotovo 80% osoba koje su se testirale slažu se s vama:
Ima smisla ... Ne, stvarno!
Još uvijek ne vjerujete? Evo citata iz specifikacije W3C CSS:
Postotak se izračunava s obzirom na širinu bloka koji sadrži blok. Napominjemo da to vrijedi i za margin-top i margin-bottom.
Isto vrijedi i za gornju i donju podlogu, u slučaju da se pitate. Što se granica tiče, nezakonito je odrediti njihovu širinu kao postotak.
Dakle, u ovom trenutku, vi vjerojatno mislite da su kreatori CSS-a također lud, ili su napravili stvarno glupu pogrešku. Ali ja sam tu da vam kažem, postoje dva dobra razloga da se vertikalne margine temelje na širini bloka koji sadrži:
Horizontalna i vertikalna dosljednost
Postoji, naravno, skraćeno svojstvo koje vam omogućuje da navedete marginu za sve četiri strane bloka:
marža: 10%;
To se proširuje na:
margina-gore: 10%; margin-right: 10%; margin-bottom: 10%; margin-left: 10%;
Sada, ako ste napisali bilo što od gore navedenog, vjerojatno biste očekivali da su margine na sve četiri strane bloka jednake veličine, zar ne? Ali ako su margina lijevo i margina desno temeljene na širini spremnika, a margina-gornja i margina-dno temelje se na njegovoj visini, onda bi obično bile različite!
Izbjegavanje kružne ovisnosti
CSS postavlja sadržaj u blokovima koji se nalaze vertikalno dolje na stranici, tako da širinu bloka obično diktira samo širina roditelja. Drugim riječima, možete izračunajte širinu bloka bez brige o tome što je u taj blok.
Visina bloka je druga stvar. Obično visina ovisi o kombiniranoj visini sadržaja. Promijenite visinu sadržaja i promijenite visinu bloka. Pogledajte problem?
Da biste dobili visinu sadržaja, morate znati gornje i donje margine koje se primjenjuju na njega. A ako te marže ovise o visini nadređenog bloka, u nevolji ste jer ne možete izračunati jedan bez poznavanja drugog!
Postavljanje vertikalnih margina na širina kontejnera razbija tu kružnu ovisnost i omogućuje postavljanje stranice.
Ace klase
Dakle, imate ga: najteže pitanje na testu, i sada možete odgovoriti na njega. Želite li znati kako ćete provesti ostatak testa? Pokušajte sami. Obećavam, većina pitanja je mnogo lakša od ove.
U međuvremenu, tražim novo najteže pitanje! Kakve pojedinosti CSS-a mislite da nitko ne zna?
Napomena urednika: Ovo je napisano za Hongkiat.com od strane Kevin Yank. Kevin je o webu pisao od 1999. godine, s knjigama o PHP-u, CSS-u i JavaScript-u za svoje ime. On je također bio domaćin podcasta, koji su izgovoreni na konferencijama, i producirao video trening, sve o webu. Sada vodi razvojni tim u Sit the Testu, web aplikaciju za izradu i preuzimanje online testova.
Više o Hongkiatu:
- Web dizajn: Jednaka visina stupca s CSS-om
- 6 CSS trikovi za vertikalno usklađivanje sadržaja
- Pogledajte u CSS jedinice: pikseli, EM i postotak
- Pogledajte u: CSS3 Box-dimenzioniranje
Sada pročitajte: 10 skrivenih CSS3 svojstava koja trebate znati
