Kaj ne veste o izračunu odstotnih stopenj v CSS

Večina spletnih oblikovalcev misli, da dobro poznajo CSS. Konec koncev ni veliko tega - nekaj tipov izbirnikov, nekaj ducatov lastnosti in nekatera kaskadna pravila, ki jih komajda zapomnite, saj se skrivajo na zdrav razum. Toda, ko se spustiš na raven gnojnega peska, obstaja veliko nejasnih podrobnosti, ki jih nekaj oblikovalcev resnično razume.

Ko sem v zadnjih šestih mesecih pregledal rezultate brezplačnega CSS testa, ki sem ga ponudil na spletu, sem odkril skoraj eno vprašanje nihče imaš prav. Na tisoče ljudi, ki so opravili test, manj kot 14% jih je pravilno izvedlo.

Vprašanje izvira iz tega: Kako izračunate odstotne marže?

Vprašanje

Recite, da ima vaše spletno mesto zabojnik div, in znotraj tega, vsebino div:

Zdaj pa dajmo to vsebino div zgornji rob:

.vsebina margin-top: 10%;

V redu, torej je 10%… ampak 10% kaj? To je vprašanje samo 13,8% ljudi lahko odgovori pravilno. Ne pozabite: ti ljudje imajo dostop do Googla!

Všeč mi je to vprašanje zdi se, da mora biti odgovor očiten. Toliko, da sumim, da večina ljudi samo ugiba (in ugiba). Ampak mogoče ne se vam zdi očitno. Mislim, če resnično uporabljate svojo domišljijo, lahko brskalnik po vsej verjetnosti izračuna takšno maržo.

Torej, kako, če jo zožim za vas, ker je vprašanje v testu dejansko večkratna izbira. Tu so vaše možnosti:

10% višine deleža vsebin
10% višine zabojnika
10% širine vsebin div
10% širine zabojnika

Zapomnite si, da pravi odgovor izbere le 13,8% ljudi s tega seznama. To je veliko slabše kot naključje!

Poglejte natančno odgovore; videli boste, da sta res samo dve stvari, ki ju morate vedeti:

Posoda ali vsebina?

Prvič, je velikost marže, ki temelji na velikosti same vsebine div, ali na velikosti zabojnika div?

Zdaj to ni gimme, ampak verjetno lahko zaupate svojim instinktom. Če nastavim div, ki je 50% širine njegovega vsebnika, in potem želim, da levi in desni rob zapolnita preostanek prostora, bi jih seveda nastavil na 25% vsakega (tako da odstotki privedejo do 100%). Za to morajo delovne marže temeljiti na dimenzijah vsebnika.

Seveda, dve tretjini ljudi, ki opravijo test, dobijo ta del odgovora prav.

Širina ali višina?

Drugič, je velikost marginega vrha glede na širino ali višino tega elementa?

Če ste pozorni, ste verjetno že stražar. Za tako malo ljudi, ki bi izbrali pravi odgovor, mora biti to trik vprašanje, kajne?

In vendar, stavim, da to komaj verjameš odgovor ni višine. No, ni.

Da, tukaj govorimo o zgornji meji. Da, velikost te meje je navpična meritev. Da, če je blok 50% višine njegovega zabojnika in ste mu dali najvišjo stopnjo 25%, bi pričakovali, da bo 25% višine zabojnika. In zmotili bi se.

Ne počutite se slabo, če ste mislili, da mora biti višina. Skoraj 80% ljudi, ki se je odločilo za test, se strinja z vami:

Smisel je ... Ne, res!

Še vedno ne verjamete? Tukaj je citat iz specifikacije CS3 za W3C:

Odstotek se izračuna glede na širino bloka, ki ga je ustvarilo polje. Upoštevajte, da to velja tudi za margin-top in margin-bottom.

Enako velja za zgornjo in spodnjo oblogo, če se sprašujete. Kar zadeva meje, je prepovedano določiti njihovo širino kot odstotek.

Torej v tem trenutku verjetno mislite, da so tudi ustvarjalci CSS zmaji, ali pa so naredili res neumno napako. Ampak tukaj sem, da vam povem, da obstajata dva dobra razloga, da navpične robove temeljite na širini bloka, ki vsebuje:

Horizontalna in vertikalna usklajenost

Seveda obstaja skrajšana lastnost, ki vam omogoča, da določite rob za vse štiri strani bloka:

marža: 10%;

To se razširi na:

marža-top: 10%; marža: 10%; margin-bottom: 10%; levi rob: 10%;

Sedaj, če ste napisali eno od zgoraj navedenih, bi verjetno pričakovali, da bodo robovi na vseh štirih straneh bloka enake velikosti, kajne? Toda če so margina levo in margina desno temeljili na širini kontejnerja, zgornji rob in spodnji del robov pa sta temeljila na njegovi višini, potem sta bili običajno različni.!

Izogibanje krožni odvisnosti

CSS postavi vsebino v blokih, ki so zloženi navpično navzdol po strani, tako da širino bloka običajno narekuje le širina njegovega nadrejenega. Z drugimi besedami, lahko izračunajte širino bloka, ne da bi vas skrbelo, kaj je znotraj ta blok.

Višina bloka je drugačna zadeva. Običajno višina odvisno od skupne višine njegove vsebine. Spremenite višino vsebine in spremenite višino bloka. Oglejte si težavo?

Da bi dobili višino vsebine, morate poznati zgornji in spodnji rob, ki ju uporabljate. In če so te marže odvisne od višine nadrejenega bloka, ste v težavah, ker ne morete izračunati enega brez poznavanja drugega.!

Oblikovanje navpičnih robov na premer vsebnika prelomi to krožno odvisnost in omogoča postavitev strani.

Ace razred

Torej ga imate: najtežje vprašanje na testu, in zdaj lahko odgovorite nanj. Želite vedeti, kako bi naredili preostanek testa? Poskusite sami. Obljubim, da je večina vprašanj veliko lažja kot ta.

Medtem pa iščem novo, najtežje vprašanje! Kakšne podrobnosti CSS mislite, da nihče ne ve?

Opomba urednika: To je napisano za Hongkiat.com Kevin Yank. Kevin je o spletu pisal od leta 1999, s svojimi imeni pa so objavljene knjige o PHP, CSS in JavaScript. Gostil je tudi podcaste, ki jih je govoril na konferencah, in izdelal video trening, vse o spletu. Sedaj vodi razvojno skupino na Sit the Test, spletno aplikacijo za izdelavo in sprejemanje spletnih testov.

Več o storitvi Hongkiat:

Izdelava spletnih strani: Enaka višina stolpcev s CSS
6 Triki CSS za poravnavo vsebine navpično
Poglejte v enote CSS: piksli, EM in odstotek
Poglejte v: CSS3 Box-sizing

Sedaj preberite: 10 skritih lastnosti CSS3, ki jih morate poznati