Čo neviete o výpočte percentuálneho rozpätia v CSS

Väčšina webových dizajnérov si myslí, že CSS vie celkom dobre. Koniec koncov, nie je to tak veľa - niekoľko typov selektorov, niekoľko desiatok vlastností a niekoľko kaskádových pravidiel, ktoré si sotva potrebujete zapamätať, pretože sa vracajú do zdravého rozumu. Ale keď sa dostanete až na úroveň hlboké, je tu veľa nejasných detailov, ktoré len málo dizajnérov skutočne rozumie.

Keď som preskúmal výsledky voľného testu CSS, ktorý som ponúkol on-line za posledných šesť mesiacov, zistil som jedna otázka takmer nikto má pravdu. Z tisícov ľudí, ktorí vykonali test, menej ako 14% to správne.

Otázka sa zhoršuje: Ako vypočítavate percentuálne marže?

Otázka

Povedzte, že vaša stránka má kontajner div, a vnútri, obsah div:

Teraz dať tento obsah div horný okraj:

.obsah margin-top: 10%;

Dobre, tak je to 10% ... ale 10% čo? To je tá otázka len 13,8% ľudí môže správne odpovedať. A pamätajte: títo ľudia majú prístup k spoločnosti Google!

To, čo mám na tejto otázke veľmi rád, je to zdá sa, že odpoveď by mala byť zrejmá. Toľko, že mám podozrenie, že väčšina ľudí len odhadnúť (a odhadnúť zle). Ale možno to nie je Zdá sa vám to zrejmé. Myslím tým, že ak skutočne používate svoju predstavivosť, existuje veľa spôsobov, ako by si mohol prehliadač vypočítať takéto rozpätie.

Takže, ak zúžím to pre teba, pretože otázka v teste je vlastne viacnásobná voľba. Tu sú vaše možnosti:

10% výšky obsahu div
10% výšky kontajnera div
10% šírky obsahu div
10% šírky kontajnera div

Nezabúdajte, že iba 13,8% ľudí môže z tohto zoznamu vybrať správnu odpoveď. To je horšie ako náhoda!

Pozrite sa na odpovede; uvidíte, že naozaj sú len dve veci, ktoré potrebujete vedieť:

Kontajner alebo Obsah?

Po prvé, je veľkosť okraja založená na veľkosti samotného obsahu div, alebo na veľkosti kontajnera div?

Teraz to nie je gimme, ale môžete pravdepodobne dôverovať svojmu inštinktom. Ak nastavím div na 50% šírky svojho kontajnera a potom chcem, aby jeho ľavé a pravé okraje naplnili zvyšok priestoru, prirodzene by som ich nastavil na 25% každej (takže percentá sa zvyšujú 100%). Na to, aby pracovali, musia byť percentuálne rozpätia založené na rozmeroch kontajnera.

Samozrejme, dve tretiny ľudí, ktorí vykonali test, dostanú túto časť odpovede správne.

Šírka alebo výška?

druhý, je veľkosť okraja na základe šírky alebo výšky tohto prvku?

Ak ste venovali pozornosť, ste už pravdepodobne vo vašom stráži. Pre tak málo ľudí, aby si vybrali správnu odpoveď, musí to byť triková otázka, správne?

A predsa, stavím sa, že to takmer nemôžete veriť odpoveď nie je výška. No, to nie je.

Áno, hovoríme tu o najvyššom rozpätí. Áno, veľkosť tohto okraja je vertikálne meranie. Áno, ak je blok 50% výšky jeho kontajnera a dal ste mu horný okraj 25%, očakávate, že bude 25% výšky kontajnera. A ty by si sa mýlil.

Necíť sa zlý, ak si myslíte, že to musí byť výška. Takmer 80% ľudí, ktorí test vykonali, s vami súhlasí:

Má zmysel ... Nie, naozaj!

Ešte neverím tomu? Tu je citát z špecializácie W3C CSS:

Percento sa vypočíta s ohľadom na šírku bloku obsahujúceho generovaný box. Všimnite si, že to platí aj pre okrajové a spodné okraje.

To isté platí pre horný a spodný výplň, v prípade, že vás zaujímalo. Pokiaľ ide o hranice, je nelegálne určiť ich šírku v percentách.

Takže v tomto bode ste pravdepodobne mysleli aj na tvorcov CSS cvoknutý, alebo len urobili naozaj blbú chybu. Ale ja som tu, aby som vám povedal, existujú dva dobré dôvody na to, aby vertikálne okraje boli založené na šírke bloku obsahujúceho:

Horizontálna a vertikálna konzistencia

Existuje samozrejme vlastnosť stenografie, ktorá vám umožňuje určiť okraj pre všetky štyri strany bloku:

marža: 10%;

Toto sa rozširuje na:

okrajová marža: 10%; margin-right: 10%; spodná marža: 10%; margin-left: 10%;

Teraz, ak ste napísali niektorý z vyššie uvedených, pravdepodobne by ste očakávali, že okraje na všetkých štyroch stranách bloku budú mať rovnakú veľkosť, že? Ak by však margin-left a margin-right boli založené na šírke kontajnera a margin-top a margin-bottom boli založené na jeho výške, potom by boli zvyčajne odlišné!

Vyhnite sa cirkulárnej závislosti

CSS určuje obsah v blokoch naskladaných zvisle nad stránkou, takže šírka bloku je zvyčajne diktovaná úplne šírkou jeho rodičov. Inými slovami, môžete vypočítať šírku bloku bez obáv o to, čo je vnútri to blokuje.

Výška bloku je iná vec. Obvykle výška závisí od kombinovanej výšky jeho obsahu. Zmeňte výšku obsahu a zmeníte výšku bloku. Pozrite si problém?

Ak chcete získať výšku obsahu, potrebujete poznať horné a dolné okraje, ktoré sa na ňu vzťahujú. A ak tieto okraje závisia od výšky rodičovského bloku, máte problém, pretože nemôžete vypočítať jeden bez toho, aby ste vedeli druhú!

Založenie vertikálnych okrajov na šírka kontajnera porušuje túto kruhovú závislosť a umožňuje vykreslenie stránky.

Túto triedu

Takže ho máte: najťažšiu otázku ohľadom testu a teraz mu môžete odpovedať. Chcete vedieť, ako by ste robili na zvyšok testu? Vyskúšajte sami. Sľubujem, väčšina otázok je oveľa jednoduchšia ako táto.

Medzitým som hľadal novú najtvrdšiu otázku! Aké detaily CSS si myslíte, že nikto nevie?

Poznámka redaktora: Toto je napísané pre Hongkiat.com od Kevin Yank. Kevin napísal o webe od roku 1999 s jeho knihami o PHP, CSS a JavaScript. Podieľal sa tiež na podcastoch, hovoril na konferenciách a pripravoval video tréning, všetko o webe. V súčasnosti je vedúcim vývojového tímu spoločnosti Sit the Test, webovej aplikácie na tvorbu a online testy.

Viac informácií o Hongkiatu:

Web Design: Rovná výška stĺpcov s CSS
6 CSS triky na zarovnanie obsahu vertikálne
Pozrite sa do jednotky CSS: Pixely, EM a Percentage
Pozrite sa do: CSS3 Veľkosť boxu

Teraz čítaj: 10 skrytých vlastností CSS3, ktoré by ste mali vedieť