Weka Jamaa - ni nini? maelezo ya kina

Nesting HTML - mchakato mrefu, ukali, lakini wabunifu sana. Licha ya ukweli kwamba kwa idadi kubwa ya watu walioajiriwa katika IT, kurasa za mtandao layout inaweza kuonekana boring mara kwa mara, wataalamu wenye wito kwa hali kama hiyo, si tu kimaelezo kufanya kazi, lakini pia kupokea kutoka mchakato wa furaha halisi.

Hata hivyo, kabla ya kuwa na uzoefu coder, kila mgeni anatumia muda mwingi kusoma maelekezo mbalimbali na specifikationer ya wote lugha HTML, na juu ya mshirika wake - CSS. Kuhusu hasa nini CSS, ni nini na nini "masikio mgomo" inaruhusu kupata up, pamoja na moja ya mali yake juu - Nafasi Jamaa - leo tutaweza kuongea.

CSS ni nini?

CSS hali inaweza kuwa transcribed na kutafsiriwa katika Urusi kama "cascading style". Sauti pretty ajabu - kwa upande mmoja, inaonekana wazi na maneno, na kwa upande mwingine - maana ya jumla ni si mara moja mateka. Hebu tuanze na rahisi - kwa mbwembwe. Teknolojia hii inaruhusu ambatisha vitu kwenye ukurasa, tabia fulani kuhusu muonekano kwamba unaweza tu kujiandikisha mara moja na kutumia idadi ya usio wa nyakati.

neno "meza" katika tafsiri ya rasmi alionekana karibu kwa ajali - kwa kweli sahihi zaidi hapa itakuwa ni ya kutumia neno "orodha" au "orodha", hata hivyo waandishi wa tafsiri ya awali kuamua kuwa CSS inaonekana kama zaidi ya orodha, na sisi ni nani kama sasa ya kujaribu yao.

Hatimaye, neno "Cascade". Ukweli ni kwamba kila kipengele unaweza kuwa mitindo kadhaa ambayo zinaweza kuchanganywa au hata kuingiliana. Katika hali kama hizo, kivinjari ina kuamua mkusanyiko wa sheria, ili kutunga kuonekana kuzuia, ambayo aligeuka kuwa mitindo kadhaa, pamoja na mmoja wao, kwa mfano, ina Nafasi Jamaa mali, na wengine - Nafasi kamili. Kwa kweli, migogoro hiyo haiwezi kuvumiliwa, lakini katika miradi mikubwa ya machafuko kama hutokea mara nyingi kabisa.

Hivyo sasa, wakati kila kitu ni wazi kutoka jina, hebu angalia mfano rahisi. Tuseme tovuti yako lazima idadi kubwa ya vifungo, iliyoundwa kwa njia fulani. Wao kuwa na mali kama vile ukubwa, kivuli, opacity, rangi. Bila shaka, unaweza kubainisha mkataba huo, kujenga kila kifungo, lakini ni rahisi zaidi kutumia CSS. Katika mazoezi, unahitaji kuelezea darasa fulani, ambayo orodha ya maadili ya yote ya mali ya juu, na kisha, badala ya orodha ndefu, tag wa kila kifungo tu haja ya kutaja jina la darasa, basi kivinjari yenyewe itakuwa rangi vipengele hivi katika rangi ya taka na kuwapa sahihi "gloss".

Je Nafasi ya mali?

Sasa kuendelea moja kwa moja mali Nafasi, kwa ajili ya ambayo ilianza makala hii nzima. Kama wewe ni ukoo na lugha ya Kiingereza, au kuwa na Intuition nzuri, basi lazima tayari kuwa wazi - mali ina wajibu wa eneo la bidhaa. Kwa kweli, njia ni, lakini badala yake kuamua eneo maalum, mali anaelezea browser jinsi ni lazima kuwekwa moja au jingine kuhusiana na karibu au katika ukurasa kwa ujumla.

Nini maadili Unaweza Nafasi mali?

mali yetu wanaweza kukubali maadili mbalimbali, kuna tano tu. Hapa ni maelezo mafupi ya kila:

• Nafasi kurithi. Kipengele hiki utapata nakala data juu ya msimamo wa kipengele kwamba ni mzazi. Kwa mfano, kama una div kwa maalum Nafasi Jamaa, basi akaingia kwa IMG kurithi thamani pia itakuwa kuweka Jamaa.
• Weka Static. Thamani hii imetolewa na vipengele vyote moja kwa moja, isipokuwa alisema tena. mambo fit katika nafasi kama ilivyoelezwa katika kanuni na hazipatikani kwa aina ya "madoido", kuruhusu kubadilisha msimamo wao.
• Nafasi kamili. By thamani hii Nafasi mali ni mara nyingi kabisa kutumika katika kesi ambapo ni muhimu ili kujenga "floating" kipengele. Na thamani fulani ya bidhaa mali ni "asiyeonekana" kwa ajili ya sehemu nyingine ya ukurasa. Hiyo ni, wao ni mpangilio kama kipengele yetu kamili haipo. Yeye mwenyewe siku zote kuwa katika nafasi, bila kujali umbali wamekuwa scrolled ukurasa.
• Nafasi Fasta. Kwa njia nyingi, thamani hii ni sawa na ile ya awali, hata hivyo, wakati kipengele kabisa ni wajibu wa mzazi, fasta matumizi tu viwianishi vya juu kushoto kona ya screen browser, kupuuza wengine wa mambo ya kuwa kabla yake.
• Hatimaye, Weka Jamaa. maadili ya aina hii inaruhusu positioning kipengele jamaa na wengine, ambayo inaweza kuwa muhimu kwa ajili ya kujenga adaptive kuashiria kuitwa katika "mpira" ya kawaida. Pamoja na mali, kipengee "kushinikiza" wengine, bila ya kupoteza uwezo wa kubadilisha msimamo wao kwenye ukurasa.

Kufanya kazi na Nafasi katika browsers tofauti

Si browsers wote ni sawa sambamba. Wakati wengi mipango mbadala kwa ajili ya Internet kutumia kwa ufanisi bila matatizo thamani alijua ya Nafasi ni kweli kabisa, "sugu maalum» Internet Explorer inazingatia mali, kulingana na toleo lake.

Kwa mfano, kwa kutumia tayari "kuzikwa" browser IE6, huwezi kutumia thamani Fixed na kurithi - "punda" wao tu kuipuuza. Hata hivyo, pamoja na ukweli kwamba toleo la saba ya hali alianza kuboresha, na Fixed tayari kushughulikiwa, kwa kurithi mpendwa "kuvinjari ili kushusha browsers mengine," kufikiwa tu katika maisha yake ya nane.

wengine wa waangalizi upole kushughulikia Nafasi kwa toleo la kwanza, isipokuwa Opera, ambayo ina got msaada wa mali katika 4 tofauti yake, ulichapishwa katikati ya miaka ya 90.

Kufanya kazi na Nafasi katika Javascript

Kwa kweli, hadithi ya jinsi ya kufanya kazi na Nafasi mali katika Javascript, sisi kuwa ni pamoja na tu kwa ajili ya uadilifu. Kwa sababu ya mali hii haina wahusika maalum katika cheo, unaweza kutumia JS bila mabadiliko yoyote, kwa mfano, kuweka div Nafasi Jamaa, ni pamoja na mstari kama hii: div.style.position = 'jamaa'.

Kama unavyoona, ni pretty rahisi.

Kwa Nafasi Jamaa uhalali tahadhari maalum?

Wakati wengi wa thamani ya mali Nafasi, ili kuweka upole, "mate" juu ya vipengele a, kwa kutumia thamani "nafasi style: jamaa", lazima daima kumbuka kuhusu ukurasa mzima kwa ujumla, kwa sababu matumizi yasiyofaa wanaweza sana "skew" maudhui yote ya screen .

Aidha, mali tu utapata kwa urahisi kubadili kudumu kubuni adaptive sababu matumizi yake moja kwa moja kuathiri kurasa zote maudhui. Kisha sisi bado kuwa na muda wa kufikiria mifano na makosa ya kutumia thamani hii, na utaona umuhimu wake dhahiri katika mazoezi.

Wakati gani unatumia nafasi jamaa?

Mbali na layout ya kawaida ya kurasa HTML, Nafasi Jamaa mara nyingi hutumiwa kutengeneza aina ya madhara ya kuvutia. Kwa mfano, kama unataka bidhaa "alikuja" kwenye ukurasa au, kinyume chake, hatua kwa hatua ya kwenda mbali na wilaya yake, ni just mali inaweza kukusaidia kutekeleza hii "hila".

Hizi "mbinu" ni kutekelezwa kwa njia ya Javascript, au, kama wewe na lengo kwa ajili ya uwekaji wa maendeleo, kwa njia ya tabia za CSS3, ambayo kuruhusu kurekebisha mabadiliko ya mzunguko kwa thamani ya kutofautiana fulani.

Aidha, katika baadhi ya kesi ya uwezekano wa kujenga "mchanganyiko" maadili Nafasi Jamaa. CSS, ingawa si kwa wakati mmoja utapata kuweka kitu kama nafasi: jamaa kabisa, lakini kwa kutumia mbinu baadhi, bado ni inawezekana kufikia athari hii. Mbinu hii inaweza kuwa na manufaa katika hali ambapo unahitaji kuunda kitu tata kama tooltip au pop-up menu. Kuzingatia mifano, sisi kutoa maelezo ya muundo wa hiyo "mchanganyiko".

Mifano ya kutumia jamaa cheo

Weka Jamaa - ni pretty rahisi, lakini chombo rahisi kwamba utapata kutekeleza aina ya madhara ya kuvutia. Ili si kupoteza muda na mahali ya kuandika bure posta template, sisi sasa algorithms kadhaa ya mdomo, ambayo unaweza kupamba tovuti yako au kurasa maalum.

Hebu kuanza kwa "kukimbia nje" line. Tuseme una haja ya kipengele ambayo "safari" kwa sababu sehemu ya kushoto ya screen na polepole hoja hiyo kwa upande wa kulia. Kutekeleza "utaratibu" kama inapaswa kuweka msimamo: jamaa; kushoto: -100px, ambapo -100 - takriban idadi ya pikseli ikiwa block upana. Mtindo huu itawawezesha kuficha kitengo nje ya screen, kuziweka katika "nafasi ya kuanza." Sasa unaweza kutumia script ambayo itaongeza kila nukta chache kushoto thamani ya mali kwa kitengo mradi hana kuwa sawa na upana wa dirisha browser bala upana wa kipengele. Matokeo yake ni kitengo kwamba hutoka nje ya makali ya kushoto, akavingirisha katika screen na "parked" katika mkono wake wa kulia.

Mfano mwingine utapata kuunda "jamaa-kabisa" vipengele. Kwa mfano, unaweza kuingiza kabisa ndani ya mwingine, baada ya Nafasi Jamaa. Matokeo yake, tuna "jamaa" block ambayo haina ukubwa ambayo kabisa ni andikwa, sasa na uwezo wa kujitokeza katika nafasi huru ya kipengele uliopita.

makosa ya kawaida wakati wa kutumia Nafasi Jamaa

makosa ya kawaida wakati wa kutumia Nafasi Jamaa ni kwamba wengi mtandao DESIGNERS kusahau uwezo wa hifadhi nafasi katika kitengo, ambayo inaweza kuwa ipo mahali popote. Kwa mfano, kama una haki kubwa, kuwekwa nje ya screen na kuwa na nafasi ya jamaa, katika nafasi yake itakuwa gaping "shimo". Hata hivyo, hata mali wakati mwingine inajenga usumbufu fulani inaweza kutumika kwa ajili ya mema, kwa mfano, kujenga athari ya kuvutia ya "binafsi kukusanyika" wa tovuti, ambapo wote wa vitalu yake ni hatua kwa hatua kuwekwa katika nafasi ya juu: 0; kushoto: 0; t. e. sehemu yake ya awali.