Kompiuteriai, Programinė įranga
Padėtyje - kas tai? išsamus aprašymas
Lizdus HTML - ilgas procesas, griežta, bet labai kūrybingi. Nepaisant to, kad dėl dirbančių IT dauguma žmonių, tinklalapiai išdėstymas gali atrodyti nuobodus rutinos, specialistai, turintys pašaukimą Tokiu atveju ne tik kokybiškai atlikti užduotį, bet ir gauna iš materialaus malonumo procesą.
Tačiau, prieš jums tapti patyręs programuotojas, kiekvienas naujokas praleidžia daug laiko studijuoja įvairias instrukcijas ir specifikacijas tiek HTML kalba, o jos sąjungininkė - CSS. Apie tiksliai ką CSS, kas tai yra ir kas yra "Svaro ausų" leidžia keltis, taip pat vieną iš savo geriausių savybių - padėtis Santykinis - Šiandien mes kalbame.
Kas yra CSS?
Žodis "stalo" į oficialų vertimą atsirado beveik atsitiktinai - iš tiesų labiau tinkama čia būtų naudoti žodį "sąrašus" arba "sąrašus", bet pirminio vertimo autoriai nusprendė, kad CSS atrodo daugiau nei sąrašo, kas mes esame pvz dabar jas išbandyti.
Galiausiai žodis "Kaskados". Faktas yra tai, kad kiekvienas elementas gali turėti keletą stilių, kad galima maišyti ar net sutampa. Tokiais atvejais, naršyklė turi kreiptis į taisyklių rinkinį, kad formuodamas bloko, kuris pasirodė esąs keletą stilių, su vienu iš jų, pavyzdžiui, turi Pozicija Santykinis turtą išvaizdą, o kiti - padėtis absoliutus. Tiesą sakant, tokie konfliktai negali būti toleruojamas, tačiau didelių projektų, tokių painiavos atsitinka gana dažnai.
Taigi, dabar, kai viskas yra iš pavadinimo aišku, pažvelkime paprastu pavyzdžiu. Tarkime, kad jūsų svetainė turi būti daug mygtukų, skirta tam tikru būdu. Jie turi savybių, pavyzdžiui, dydžio, šešėlis, drumstumas, spalva. Žinoma, galite nurodyti šiuos parametrus, kuriant kiekvieną mygtuką, bet yra daug lengviau naudoti CSS. Praktiškai, jums reikia apibūdinti tam tikrą klasę, kurioje išvardyti visi iš pirmiau minėtų savybių reikšmes, o tada vietoj ilgo sąrašo, kiekvieno mygtuko tegus bus tik reikia nurodyti klasę vardą, tada pati naršyklė nuspalvinkite šiuos elementus norimą spalvą ir suteikti jiems tinkamą "blizgesys".
Ką pozicijos nuosavybė?
Mes dabar eikite tiesiai į turto pozicijos, už vardan kurių buvo pradėtas visą šį straipsnį. Jei esate susipažinę su anglų kalba arba turi gerą intuiciją, tada jau turėtų būti aišku - šis turtas yra atsakingas už prekės vietos. Iš tiesų, kaip ji yra, bet vietoj to nustato konkrečią vietą, šio objekto pasakoja naršyklę, kaip ji turėtų būti dedamas vienas ar kitas elementas, atsižvelgiant į gretimų ar visoje puslapyje kaip visuma.
Kas dydžiai gali pozicijos nuosavybė?
Mūsų turtas gali priimti keletą skirtingų reikšmių, yra tik penki. Čia yra trumpas aprašymas kiekvieną:
- Pozicija Paveldėti. Ši funkcija leidžia kopijuoti duomenis apie elemento, kuris yra vienas iš tėvų padėtį. Pavyzdžiui, jei turite div su nurodytu padėtyje, tada įvesti į jį su IMG paveldėtame vertės, taip pat bus nustatytas santykinis.
- Padėkite statiška. Ši vertė yra skiriamas visų elementų automatiškai, jei nenurodyta, bet daugiau. Elementai tilptų į padėtį, kaip minėta kodas ir nėra sukurti "maivymasis" veislės, leidžianti pakeisti savo poziciją.
- Pozicija Absoliutas. Iki šios vertės pozicija nuosavybė yra gana dažnai naudojamas tais atvejais, kai tai yra būtina sukurti "plaukiojančiu" elementas. Su tam tikro turto vertės elementas yra "nematoma" dėl kitų komponentų puslapyje. Tai yra, jie yra išdėstyti taip, tarsi mūsų absoliutus elementas neegzistuoja. Jis pats visada bus savo vietoje, nepriklausomai nuo to, kaip toli buvo slinks puslapį.
- Pozicija Fiksuoto. Įvairiais būdais, tai yra, vertės nėra panašus į ankstesnįjį, tačiau, o absoliutus elementas yra susietas su tėvų, fiksuoto naudoja tik apie viršutiniame kairiajame kampe naršyklės ekrane koordinates, ignoruojant elementų, kad prieš ją pailsėti.
- Galiausiai padėtyje. Šio tipo vertės leidžia padėties nustatymo elementas, lyginant su kita, kuri gali būti naudinga sukurti pritaikomas ženklu vadinamas bendrąja "gumą". Su šio objekto, elementas bus "stumti", kita vertus, neprarandant galimybę pakeisti savo poziciją dėl puslapio.
Darbas su pozicijos skirtingose naršyklėse
Ne visos naršyklės vienodai suderinama. Nors dauguma alternatyvių programos interneto naršymas be jokių kliuvinių suvokiama vertė pozicija yra visiškai teisinga ", chroniškai ypatingą» Internet Explorer "mano turtą, priklausomai nuo jo versija.
Pavyzdžiui, naudojant jau "palaidotas" naršyklę IE6, jūs negalite naudoti nustatytos vertės ir paveldėti - "asilas", jie tiesiog ignoruoti. Tačiau, nepaisant to, kad septintoji versija situacija ėmė gerėti, ir fiksuota jau tvarkomi, paveldėti mylimą "naršyklė atsisiųsti kitų naršyklių" pasiekė tik savo aštuntą įsikūnijimas.
Iš stebėtojų poilsio ramiai dirbti poziciją pirmą versiją, su Opera, išskyrus, kuris gavo iš savybių palaikymą savo 4 variantų, kuris buvo paskelbtas 90-ųjų viduryje.
Darbas su pozicijos JavaScript
Iš tiesų, kaip dirbti su pozicija turto JavaScript istorija, mes turime įtraukti tik padorumo dėlei. Kadangi šis turtas neturi jokių specialių simbolių pavadinime galite naudoti JS be jokių pakeitimų, pavyzdžiui, nustatyti div padėtyje, turėtų apimti liniją panašaus į tai: div.style.position = 'santykinį ".
Kaip matote, tai gana paprasta.
Kodėl Pareigos santykinius privalumus ypatingą dėmesį?
Nors dauguma turto vertės pozicijos, švelniai tariant, "ikrai" ant aplinkinių elementų, naudojant vertę "stilius poziciją: santykinis", visada turi prisiminti apie visą puslapį, kaip visumos, nes netinkamo naudojimo gali stipriai "nerijos" visą turinį ekrane ,
Kada reikia naudoti sąlyginę padėtį?
Be įprastinių išdėstymo puslapių HTML, padėtyje dažnai naudojama siekiant sukurti įdomių efektų. Pavyzdžiui, jei norite elementą "atėjo" puslapyje arba, priešingai, palaipsniui peržengė savo teritorijoje, tai būtent ši savybė gali padėti jums įgyvendinti šią "apgauti".
Šie "gudrybės" yra įgyvendinamos JavaScript, arba, jei siekiama laipsniško įvedimo, per CSS3 savybių, kurios leidžia jums reguliuoti ciklinį pokytį konkretaus kintamojo vertę.
Pavyzdžiai naudojant santykinį reitingą
Padėtyje - tai gana paprasta, bet lankstus įrankis, kuris leidžia jums įgyvendinti daug įdomių efektų. Kad ne eikvoti laiką ir vietą, rašo nenaudingas kodas šabloną, mes pateikiame keletą burnos algoritmus, kurie gali papuošti jūsų svetainę ar konkrečius puslapius.
Pradėkime nuo "baigsis" linija. Tarkime, jūs turite už elementas, kuris bus "kelionės", nes kairiojo ekrano krašto ir lėtai perkelti jį į dešinę pusę poreikį. Įgyvendinti tokį "mechanizmas" turėtų nustatyti pozicija: reliatyvus; kairysis: -100px, kur -100 - apytikris vaizdo elementų, sudarančių blokas plotį. Šis stilius leis jums paslėpti bloką už ekrano, įdėti jį į "pradinę padėtį". Dabar galite naudoti scenarijus, kad bus padidinti kas keletą milisekundžių liko objekto vieneto vertės tol, kol ji netampa lygus naršyklės lango plotį minus elemento plotį. Rezultatas yra vienetas, kuris išeina iš kairiojo krašto, traiškyti per ekraną ir "pastatyti" į dešinę ranką.
Kitas pavyzdys leidžia sukurti "giminaitis-absoliučia" elementų. Pavyzdžiui, galite įvesti absoliutus viduje kitą, turintys Pozicija giminaitis. Kaip rezultatas, mes turime "santykinį" blokas, kuri neturi dydį, iki kurio absoliutus užrašas, dabar gali pasireikšti tokioje padėtyje, nepriklausomai nuo ankstesnio elemento.
Tipinės klaidos, kai, naudojant Pozicija Santykiniai
Dažniausia klaida, kai naudojant padėtyje yra tai, kad daugelis interneto dizaineriai pamiršti apie galimybę rezervuoti vietą vieneto, kuris gali būti bet kurioje. Pavyzdžiui, jei turite gana didelis, nebepriklauso ekrano ir turintys santykinį padėtį, į jo vietą bus Atvira "skylė". Tačiau net šis viešbutis yra kartais sukuria tam tikrų nepatogumų, gali būti naudojami geros, pavyzdžiui, kuriant įdomų efektą svetainės, kur visi jos blokų palaipsniui patenka į aukščiausią poziciją "savęs montavimas": 0; kairysis: 0; T. El. savo pradinę vietą.
Similar articles
Trending Now