Staða Hlutfallsleg - hvað er það? Ítarlegar lýsingar

HTML skipulag er langt ferli, scrupulous, en mjög skapandi. Þrátt fyrir að fyrir flest fólk sem starfar á sviði upplýsingatækni getur útlit vefsíðna virst eins og leiðinlegur venja, sérfræðingar með köllun fyrir slíkt, ekki aðeins að sinna verkefnum eðlilega heldur einnig áþreifanlega ánægju af ferlinu sjálfu.

Hins vegar, áður en hún er reyndur vefur hönnuður, nýtur hver nýliði mikinn tíma að læra ýmsar leiðbeiningar og upplýsingar um bæði HTML tungumálið og bandalag sitt CSS. Það er um hvað CSS er, hvað það er fyrir og hvað "feints with ears" gerir þér kleift að fara upp, og einnig um einn af vinsælustu eiginleikum hennar - Staða Relative - við munum tala í dag.

Hvað er CSS?

Skammstafan CSS er hægt að afgreiða og þýða á rússnesku sem "cascading style sheets". Það hljómar svolítið skrítið - annars vegar, eins og orðin og skiljanlegt, en hins vegar - þá er almenn merking ekki tekin í einu. Við skulum byrja með einföldum - með stílum. Þessi tækni gerir þér kleift að gefa hluti á síðunni ákveðnar eiginleikar sem tengjast útliti, sem aðeins má ávísa einu sinni en nota óendanlega mörgum sinnum.

Orðið "töflur" í opinberri þýðingu virtist vera næstum slysni. Í raun væri betra að nota orðið "blöð" eða "listar" en höfundar upphaflegrar þýðingar ákváðu að CSS lítur út eins og listi en listinn og hver við erum Slíkir eru nú dæmdir.

Að lokum, orðið "Cascade". Staðreyndin er sú að hver þáttur getur haft nokkrar stíll í einu, sem hægt er að blanda eða jafnvel skerða. Í slíkum tilfellum þarf vafrinn að grípa til fjölda reglna til þess að rétt sé að búa til útliti blokkarinnar, sem hefur nokkrar stíll, með einum af þeim, til dæmis hefur eign Staða Relative og hinn - Staða algerlega. Reyndar er ekki hægt að þola slíkar átök, en í stórum verkefnum kemur slík rugl fram oft.

Svo, nú þegar nafnið er skýr, skulum líta á eitt einfalt dæmi. Segjum að þú hafir mikinn fjölda hnappa á vefsíðunni þinni sem eru hönnuð á vissan hátt. Þeir hafa svo eiginleika sem stærð, skugga, gagnsæi, lit. Auðvitað getur þú tilgreint þessar breytur og búið til hvern hnapp, en það verður mun auðveldara að nota CSS. Í reynd þarf að lýsa flokki þar sem gildin af öllum ofangreindum eiginleikum verða skráð, og síðan, í stað langrar upptalningar, þarf aðeins að merkja heiti þessa hvern hnapp, þar sem vafrinn mun mála þessi atriði í nauðsynlegum litum og gefa þeim rétt "Gloss".

Afhverju þarf ég eignina Staða?

Nú skulum við flytja beint til eignarinnar Staða, þar sem allt greinin var hugsuð. Ef þú ert kunnugur ensku eða átt góða innsæi, þá ættir þú að skilja þegar - þessi eign er ábyrg fyrir staðsetningu frumefnisins. Reyndar er það, en í stað þess að skilgreina ákveðna stað, segir þessi eign vafrann hvernig á að nákvæmlega setja hlut miðað við nærliggjandi eða alla síðuna í heild.

Hvaða gildi geta staðsetningareignin tekið?

Eign okkar getur tekið nokkrar mismunandi gildi, það eru aðeins fimm af þeim. Hér er stutt lýsing á hverju þeirra:

• Staða inherit. Þessi eign leyfir þér að afrita stöðugögn vörunnar sem er foreldrið. Til dæmis, ef þú ert með div með tilgreindri stöðu hlutfallslega, þá mun innritað IMG með arfvirði einnig fá gildi Relative.
• Staða Static. Þetta gildi er gefið öllum þáttum sjálfkrafa, nema annað sé tekið fram. Elementar passa inn í stöðu eins og þau eru nefnd í kóðanum og eru ekki í boði fyrir ýmis "lostæti" sem gera þeim kleift að breyta stöðu sinni.
• Staða algerlega. Þetta gildi Staða eignarinnar er oft notað í þeim tilvikum þar sem nauðsynlegt er að búa til "fljótandi" frumefni. Hafa þetta eignar gildi, þá er þátturinn enn "ósýnilegur" fyrir the hvíla af the blaðsíða. Það er, þeir eru staðsettir eins og ef alger þáttur okkar er alls ekki til. Hann sjálfur mun alltaf vera á sínum stað, óháð því hversu langt síðan var flett.
• Staða fastur. Að mörgu leyti er þetta gildi svipað og áður en alger þáttur er tengdur við foreldrið, notar fastur aðeins hnit efra vinstra horni vafraskjásins, ekki að borga eftirtekt til annarra þátta sem liggja fyrir.
• Að lokum, Staða Relative. Þessi tegund af gildi gerir þér kleift að staðsetja þáttinn miðað við aðra, sem getur verið gagnlegt þegar þú býrð til aðlögunarhæfrar merkingar, sem kallast "gúmmí" í algengu fólki. Með þessari eign mun frumefnið "fara í sundur" afganginn, án þess að tapa getu til að breyta staðsetningu sinni á síðunni.

Lögun af vinnu með stöðu í mismunandi vöfrum

Ekki eru allir vafrar jafn samhæfir. Þó að flestar aðrar áætlanir fyrir brimbrettabrun án þess að hitching sé að meta stöðu Staða er algerlega satt, þá telur "Internet Explorer" þennan tíma háð útgáfu þess.

Til dæmis, með því að nota þegar grafinn IE6 vafranum, getur þú ekki notað Fast og Inherit gildi - asnan einfaldlega hunsar þau. Hins vegar, þrátt fyrir að frá því í sjöunda útgáfunni var ástandið byrjað að leiðrétta, og fast var þegar verið að vinna, til að inherit allir líkaði "vafranum til að hlaða niður öðrum vöfrum" fékk aðeins í áttunda formi.

The hvíla af the gagnrýnandi meðhöndla hljóðlega stöðu frá fyrstu útgáfum, að undanskildum Opera, sem keypti stuðning þessa eign í 4 afbrigði hans, út í miðjan 90's.

Vinna með stöðu í Javascript

Í raun er sagan um hvernig á að vinna með stöðu eignarinnar í Javascript, við tökum aðeins fyrir sakir nægja. Þar sem þessi eign hefur ekki sérstaka stafi í nafninu getur þú notað JS án þess að breyta, til dæmis til að stilla staðsetningarhlutfallið. Þú ættir að innihalda þessa línu: div.style.position = 'relative'.

Eins og þú sérð er allt alveg einfalt.

Hvers vegna Staða Relative skilið sérstaka athygli?

Þó að flestir gildi staðsetningar eignarinnar, til að segja það mildilega, "spýta" á nærliggjandi þætti, með því að nota gildi "stílstöðu: ættingja", er það alltaf þess virði að muna alla síðuna í heild, því að röng notkun þess getur mjög "raskað" allt innihald skjásins .

Að auki leyfir aðeins þessi eign að þú getir auðveldlega breytt föstum hönnun í aðlögunarhæf, vegna þess að forritið hefur sjálfkrafa áhrif á allt innihald síðunnar. Næstum höfum við enn tíma til að íhuga dæmi og villur með því að nota þetta gildi og þú munt sjá raunverulegt gildi þess í reynd.

Hvenær ætti ég að nota hlutfallslega staðsetningu?

Í viðbót við útlitið á hefðbundnum HTML síðum er Staða Relative oft notað til að búa til ýmsar áhugaverðar áhrifin. Til dæmis, ef þú vilt að þáttur sé "kominn" á síðu eða öfugt, þá fer hann vel í brúnina, þá getur þessi eign hjálpað þér að framkvæma þessa "feint".

Svipaðar "bragðarefur" eru til framkvæmda með Javascript, eða ef þú ert að reyna að framsækið skipulag, í gegnum eiginleika CSS3, sem leyfir þér að stilla hringlaga breytingu á gildi breytu.

Að auki er í sumum tilfellum hægt að búa til "blendingur" Staða Hlutfallsleg gildi. CSS, þótt það leyfir þér ekki samtímis að setja eitthvað eins og staða: alger ættingi, en með því að nota nokkrar bragðarefur, getur þú enn náð þessum áhrifum. Þessi nálgun getur verið gagnleg í þeim tilvikum þegar þú þarft að búa til eitthvað eins og flókið tóltips eða samhengisvalmynd. Í ljósi dæmanna munum við örugglega lýsa uppbyggingu slíkrar "blendinga".

Dæmi um að nota hlutfallslega staðsetningu

Staða Relative er frekar einfalt og sveigjanlegt tól sem gerir þér kleift að framkvæma mörg áhugaverð áhrif. Til þess að eyða tíma og plássi við að skrifa gagnslaus sniðmát kóða, gefa við þér nokkur munnleg reiknirit sem getur skreytt síðuna þína eða einstök síður.

Við skulum byrja á "hlaupandi út" línu. Segjum að þú hafir þörf fyrir frumefni sem "ferðast" frá bak við vinstri brún skjásins og fer smátt og smátt til hægri. Til að framkvæma slíkt "kerfi" þarftu að stilla stöðu: ættingja; Vinstri: -100px, þar sem -100 er áætlað fjöldi punkta sem mynda breidd blokkarinnar. Þessi stíll mun leyfa þér að fela blokkina fyrir utan skjáinn og setja hana á "upphafsstöðu". Nú er hægt að nota handrit sem stækkar verðmæti vinstri eignar á nokkurra millisekúndna þangað til það verður jafn breidd vafraglugga að frádregnum breidd frumefnisins. Þess vegna fáum við blokk sem birtist á bak við vinstri brún, rúllaði um allan skjáinn og "skráðu" á hægri hlið.

Annað dæmi leyfir þér að búa til "tiltölulega alger" þætti. Til dæmis getur þú slegið inn algeran inni í öðru sem hefur Staða Relative. Þar af leiðandi höfum við "ættingja" blokk sem hefur ekki stærð, þar sem alger maður er skrifaður, fær um að sýna sig í stöðu sem fer eftir þeim þáttum sem fylgja henni.

Algengar villur þegar staðsetning er notuð

Algengasta mistökin þegar staðan er notuð er að margir skipulagshönnuðir gleyma því að geta boðið pláss fyrir blokk sem getur verið hvar sem er. Til dæmis, ef þú ert með nokkuð stór einn, sem er staðsettur utan skjásins og með hlutfallslega staðsetningu, mun "holu" birtast á sínum stað. Hins vegar getur jafnvel þessi eign, sem stundum skapar ákveðnar óþægindi, verið notuð til góðs, til dæmis með því að búa til áhugaverð áhrif á "sjálfsöfnunarsíðu" þar sem allar blokkir hennar eru smám saman settar efst: 0 stöðu; Vinstri: 0; Það er, í upprunalegum stað.