Ko jūs nezināt par procentu likmju aprēķināšanu CSS
Lielākā daļa tīmekļa dizaineru domā, ka viņi labi pārzina CSS. Galu galā, tam nav tik daudz - dažiem atlases veidiem, dažiem desmitiem īpašību un dažiem kaskādes noteikumiem, kas jums tikko ir jāatceras, jo tie vārās uz veselo saprātu. Bet, kad jūs nokļūsiet līdz asprātīgajam līmenim, ir daudz neskaidru detaļu, ko daži dizaineri patiesi saprot.
Kad es pārbaudīju bezmaksas CSS testa rezultātus, ko esmu piedāvājis tiešsaistē pēdējos sešus mēnešus, es atklāju viens jautājums, kas gandrīz neviens labi. No tūkstošiem cilvēku, kas veica testu, mazāk nekā 14% saņēmuši to pareizi.
Jautājums ir šāds: Kā aprēķināt procentu likmes?
Jautājums
Sakiet, ka jūsu vietnei ir konteiners div, un tā iekšpusē, saturs div:
Tagad dosim šo saturu div augstākā rezerve:
.saturs margin-top: 10%;
Labi, tāpēc tas ir 10% ... bet 10% no kas? Tas ir jautājums tikai 13,8% cilvēku var atbildēt pareizi. Un paturiet prātā: šiem cilvēkiem ir piekļuve Google!
Tas, ko es mīlu par šo jautājumu, ir tas, ka šķiet, ka atbildei jābūt acīmredzamai. Tik daudz, ka man ir aizdomas, ka lielākā daļa cilvēku vienkārši uzminē (un uzmini nepareizi). Bet varbūt tā nav jums šķiet acīmredzami. Es domāju, ja jūs patiešām izmantojat savu iztēli, pārlūkprogrammā ir daudz veidu, kā varētu aprēķināt šādu peļņu.
Tātad, kā par, ja es sašaurinātu to jums, jo jautājums testā ir faktiski vairākkārtēja izvēle. Šeit ir jūsu iespējas:
- 10% no satura divpakāpju augstuma
- 10% no konteinera div augstuma
- 10% no satura div platuma
- 10% no konteinera div platuma
Atcerieties, ka tikai 13,8% cilvēku var izvēlēties pareizo atbildi no šī saraksta. Tas ir sliktāks par iespēju!
Rūpīgi apskatiet atbildes; jūs redzēsiet, ka tiešām ir tikai divas lietas, kas jums jāzina:
Konteiners vai saturs?
Pirmkārt, ir starpības lielums, pamatojoties uz paša satura lielumu, vai uz konteinera div?
Tagad tas nav gimme, bet jūs droši vien varat uzticēties jūsu instinktiem. Ja es iestatītu div 50% no tās konteinera platuma, un pēc tam es vēlos, lai tās kreisās un labās malas aizpildītu atlikušo vietu, es, protams, tos iestatītu līdz 25% (tāpēc procenti palielinās līdz 100%). Lai to paveiktu, procentu likmju starpībai jābūt balstītai uz konteinera izmēriem.
Protams, divas trešdaļas cilvēku, kas veic testu, saņem šo atbildes daļu.
Platums vai augstums?
Otrkārt, ir margas virsmas lielums, pamatojoties uz šī elementa platumu vai augstumu?
Ja jūs pievēršat uzmanību, jūs, iespējams, jau esat apsardze. Lai tik maz cilvēku varētu izvēlēties pareizo atbildi, tam ir jābūt triks jautājumam, labi?
Un tomēr, es bet deru, ka tu tikko ticiet atbilde nav augstums. Nu, tā nav.
Jā, mēs šeit runājam par augstāko rezervi. Jā, šīs robežas lielums ir vertikāls mērījums. Jā, ja bloks ir 50% no konteinera augstuma, un jūs piešķirāt tam 25% lielu rezervi, jūs sagaidāt, ka tas būs 25% no konteinera augstuma.. Un jūs būtu nepareizi.
Nejūtos slikti, ja domājāt, ka tam jābūt augstumam. Gandrīz 80% cilvēku, kas veic testu, piekrīt jums:
Tas rada sajūtu… Nē, tiešām!
Joprojām neticu? Šeit ir citāts no W3C CSS spec:
Procentuālais lielums tiek aprēķināts attiecībā pret ģenerētā lodziņa bloka platumu. Ņemiet vērā, ka tas attiecas arī uz malas augšdaļu un apakšējo malu.
Tas pats attiecas uz augšējo un apakšējo polsterējumu, ja jūs domājat. Kas attiecas uz robežām, ir nelikumīgi norādīt to platumu procentos.
Tātad šajā brīdī, jūs, iespējams, domājat CSS radītāji bonkers, vai viņi tikko izdarīja patiesi mēmu kļūdu. Bet es esmu šeit, lai pateiktu jums, ir divi pamatoti iemesli, lai vertikālās robežas balstītu uz bloka platumu:
Horizontālā un vertikālā konsekvence
Protams, ir īsfunkciju īpašums, kas ļauj norādīt rezervi visām četrām bloka pusēm:
starpība: 10%;
Tas paplašinās līdz:
margin-top: 10%; labās malas: 10%; margas-apakšas: 10%; margas - pa kreisi: 10%;
Tagad, ja jūs uzrakstījāt kādu no iepriekš minētajiem, jūs droši vien sagaidāt, ka visu četru bloku malas būs vienāda lieluma, vai ne? Bet, ja margas kreisās un malas labās puses bija balstītas uz konteinera platumu, un peļņas augšdaļas un apakšējās malas pamatā bija tās augstums, tad viņi parasti būtu atšķirīgi!
Cirkulārās atkarības novēršana
CSS nosaka saturu blokos, kas tiek novietoti vertikāli lejup pa lappusi, tāpēc bloka platumu parasti nosaka tikai tās vecāka platums. Citiem vārdiem sakot, jūs varat aprēķināt bloka platumu, neuztraucoties par to, kas ir iekšā šo bloku.
Bloka augstums ir cits jautājums. Parasti augstums atkarīgs no tā satura augstuma. Mainiet satura augstumu un mainiet bloka augstumu. Skatiet problēmu?
Lai iegūtu satura augstumu, jums jāzina augšējās un apakšējās robežas, kas tam tiek piemērotas. Un, ja šīs robežas ir atkarīgas no vecāka bloka augstuma, tad jums ir nepatikšanas, jo jūs nevarat to aprēķināt, nezinot otru!
Vertikālo margu pamatā ir platums no konteinera pārtrauc šo apļveida atkarību un ļauj izvietot lapu.
Ace klase
Tātad jums ir tas: vissmagākais jautājums par testu, un tagad jūs varat atbildēt uz to. Vēlaties uzzināt, kā jūs darāt pārējā testa laikā? Izmēģiniet to pats. Es apsolu, ka lielākā daļa jautājumu ir daudz vieglāki nekā šis.
Tikmēr es meklēju jaunu visgrūtāko jautājumu! Kādu CSS detaļu jūs domājat, ka neviens nezina?
Redaktora piezīme: Tas ir rakstīts Hongkiat.com Kevin Yank. Kevins ir rakstījis par tīmekli kopš 1999. gada, ar grāmatu par PHP, CSS un JavaScript uz viņa vārdu. Viņš ir arī izvietojis podkastus, kas tiek runātas konferencēs, un sagatavoja video apmācību par visu tīmekli. Tagad viņš vada attīstības grupu Sit the Test, tīmekļa lietojumprogrammu tiešsaistes testu veikšanai un veikšanai.
Vairāk par Hongkiat:
- Web dizains: vienāds kolonnas augstums ar CSS
- 6 CSS triki, lai pielāgotu saturu vertikāli
- Meklēt CSS vienībās: pikseļi, EM un procentuālā daļa
- CSS3 kastes izmēri
Tagad lasiet: 10 slēptās CSS3 īpašības, kas jums jāzina
