Mivel összesen html elemek CCS s-pro studio web design
Hajnalban design ötlet HTML jelölőnyelv Egyéb irodai végeztük főleg táblázatokkal. Asztalok használják, ahol csak lehetséges. Például behúzni a bal tett egy üres tábla oszlop. Ha szükséges volt, hogy több helyen elemek táblázat celláinak, van behelyezve egy másik beágyazott táblázat.
Ennek eredményeként a végső kód a dokumentum egy nagyon erősen beágyazott kódot, amely egy nagy táblák számát. Néha eszembe jut egy program Basic, amit írt az iskolában. Nem tudtuk, hogy vannak funkciók és procedurális, így a programok egy folyamatos „spagetti” egy mély szintű fészkel.
Most, több és több népszerű (különösen a stílus Web 2.0) nélkül egyre asztal módja elrendezés weboldalakat alapuló CSS tulajdonság helyzetbe. Még néhány üresedés láttam fő követelménye a web designer az a képesség, hogy elő anélkül, táblázatok HTML kódot.
Hogyan kell telepíteni a pozicionáló elemek
Telepítéséhez az elhelyezése a meglévő CSS tulajdonság helyzetbe. Meg lehet venni az öt értékek:
Az alapértelmezett érték az ingatlan értéke - statikus. Ie Ha a pozíció értéke nincs kifejezetten megadva, akkor a tétel statikusan elhelyezett. Ez fontos. A pozíció értékét tulajdonság nem öröklődik az alapértelmezett. Ahhoz, hogy az értéket örökölt a szülő elem, az szükséges, hogy a gyermek zvetlenül helyzetének beállításához tulajdonság megegyezik az örökli, például:
a.link összesen: öröklik;
>
Ebben az esetben, a pozicionáló referencia megegyezik, hogy a szülő elem.
statikus helymeghatározás
Statikus helymeghatározás - ez általában nem ér egyáltalán. Nem kell, hogy explicit, mivel ez az alapértelmezett érték. Az egyik lehetséges változata annak kifejezett használatát - a program törli a globális szabály érvényesült. Itt egy egyszerű példa:
Ebben az esetben az összes elemet div abszolút pozíció hozzárendelve. De azok az elemek, akik telepítették id = „new” pozicionálási statikus. Nagyjából elmondható, hogy a második szabály felülírja az első néhány eleme.
Statikus pozicionáló azt jelenti, hogy az elem található követően azonnal elem, amely megelőzi a dokumentum szerkezetét HTML.
relatív pozicionálás
Relatív pozicionálás - Helymeghatározás relatív. magát az elemet. Ez nem furcsa hangzik - ez igaz.
Itt van, hogyan működik elméletben: a helyzet az elem keretében az oldal elrendezését ugyanaz marad, mintha statikus elhelyezése. De az elem jelenik meg egy másik helyen, amelynek koordinátái vannak képest a statikus helyzetben.
Lehet, hogy ez nem teljesen világos. Ezért vegyünk egy példát:
A tetején a nagy téglalapot kell elhelyezni div, amely id = test1. De ahogy kértük a relatív helymeghatározás (felső és bal értékek), akkor megjelenik az piskseley fenti 30. és 30. pixel jobbra (felső eltolódott -30 és a bal szélén 30) számára.
Menj előre. Úgy tűnik, hogy már eltávolították test1 elem. Azonban nézd meg a test2 elem. Ez olyan, mintha test1 elem nem tolódik (azaz volna statikailag elhelyezve).
Ez a fő jellemzője a dinamikus elhelyezése. Elem megjelenésekor eltolt, de a szerkezet egy webes dokumentum nem változik.
Mit kérdeznél a mozgató elem a kiindulási helyzetből, négy tulajdonságok: balra, jobbra, felülre, alulra. Ezek a tulajdonságok azt jelenti -, hogy eltolódik a megfelelő él elem: balra, jobbra, felső, alsó. Az értékek ilyen tulajdonságok lehetnek negatív, ami azt jelenti, eltolódást az ellenkező irányba (a bal és jobb - bal, és a felülről lefelé - up).
Ennek megfelelően, nincs értelme, hogy meghatározza a tulajdonságait egyaránt felső és alsó, valamint a bal és a jobb. Az egyik ilyen paraméterek nem lesznek figyelembe véve.
Tartsuk szem előtt, hogy a táblázat celláinak viselkedését ezek az elemek a CSS 2.1 szabvány nem határozza meg, így a legjobb, hogy nem használja ezeket a tulajdonságokat táblákat.
Úgy tűnhet, hogy a használata a relatív helymeghatározás meglehetősen korlátozott. De akkor látni fogjuk, hogyan kell használni ezt a tulajdonságot.
abszolút pozicionálás
Ha az abszolút pozicionálás elem állítva, akkor az teljesen eltávolították a HTML dokumentum szerkezete. Ez a dokumentum keletkezik, mint ha nem lenne elemekkel. Ezután, a felső „átfedés” abszolút pozicionált elemek.
Ahhoz, hogy pozícióját adja meg egy elem abszolút pozicionálás használatos összes ugyanazt a négy tulajdonságok: bal, felső, alsó, jobb. Ez csak az értelme ezeknek a tulajdonságoknak eltér a jelentésük a relatív helymeghatározás. A abszolút pozicionálás Ezen tulajdonságok meghatározzák a pozíciókat a négy sarkát az elem.
szög értékek meghatározott egység hosszúságú (például, a pixel), vagy százalékos. A százalékos értéket a felső és alsó tulajdonságok határozzák meg a százalékos arány a magasság (magasság) tartalmazó blokk. A százalékos érték a tulajdonságainak jobb és bal határozzuk meg a százalékos aránya a szélessége (szélesség) tartalmazó blokk.
Mi az a „tartalmazó blokk”?
Ez egy nagyon jó kérdés. Most már tudjuk, hogy miért fontos, hogy megismerjük és megértsük.
Itt van, amit a CSS 2.1 specifikációt tartalmazó „blokk” (amely blokk):
Ha az abszolút pozicionáló elemen meghatározott tartalmú egység legközelebb őse, amelynek abszolút, relatív vagy rögzített elhelyezése. Ha ilyen őse létezik, a készülék tartalmaz egy „alapegység tartalmaz” (kezdeti tartalmazó blokk).
Próbáld megérteni. Az előd egyértelmű. A legközelebbi előd helymeghatározó eltér a statikus az anyagot tartalmazó elem.
De mi van, ha nincs ősök, hogy világosan illenek? És, hogy mit jelent a „bázis tartalmazó blokk”?
Ismét utalva a CSS specifikáció:
Más szóval, akkor feltételezhetjük, hogy a bázis olyan elemet tartalmaz - maga html dokumentum. Azaz, az első tagja, amelynek abszolút pozicionálás lesz elhelyezve képest az egész dokumentumot. Azt is feltételezhetjük, de azt hiszem, én nem ajánlom. Mert leírás ad neki kiszolgáltatva a böngésző (user agent).
Ez nem mindig kényelmes. Sokkal könnyebb egy elemet egy bizonyos helyen a dokumentumot. Ezt úgy lehet elérni, a relatív helymeghatározás.
Emlékezz megemlítettem, hogy beszélni, hogyan kell használni elemek egymáshoz viszonyított elhelyezése? Tehát most már tudjuk a választ erre a kérdésre.
Pozícionálható elem teljesen, de ettől eltekintve néhány más elem, meg kell győződnie arról, hogy a másik elem (amely lehet egy őse a hierarchiában a HTML dokumentum) lett tartalmazó blokk. Ez történhet úgy, hogy egy tulajdonság érték viszonylagos helyzetét, és anélkül, hogy megváltoztatná a tulajdonságait a nyírási elem (bal, felső, alsó, jobb).
Az abszolút pozicionált elem tulajdonságai bal, felső, alsó, jobb szögek elem határozza meg a tolva a szomszédos sarkai a tartalmazó blokk. Így, jobbra: 30px azt jelenti, hogy a derékszög elemet kell eltolni 30 pixeleket a jobb szélétől a tartalmazó egységet.
Itt van, hogyan elméletileg működnie kell:
De nem minden böngésző követni HTML és CSS szabványok. Az egyik legfontosabb a „rossz fiúk” az Internet Explorer a Microsoft.
Ebben az esetben, az IE, az alábbiak szerint történik. Ha mindkét tulajdonságok, például a felső és alsó, illetve bal és jobb, majd IE figyelmen kívül hagyja a második érték. Ie ha a megadott értékek és a felső, alsó és ezzel egyidejűleg az IE csak felső, alsó és figyelmen kívül hagyja.
„Win” a viselkedése IE megadhatja csak a felső tulajdon és a bal oldalon, és egyértelműen meg kell határozni a szélesség (szélesség) és a magasság (magasság) az elem. Itt egy példa:
Ez a kód jelenik meg ugyanaz minden böngésző, bár nem úgy néz ki, mint elegáns, mint a feladat mind a négy tulajdonságait. És mindez azért, mert az a tény, hogy az IE - a legnépszerűbb böngésző a világon. Akarsz menni Firefox vagy az Opera. )
Mind a négy tulajdonság lehet állítani automatikus. Ez azt jelenti, hogy az ingatlan értékét vesszük, ha az elem már statikusan elhelyezett. Ez akkor hasznos, ha azt szeretné, hogy mozog a elemet bármely irányban. Például a nyírási elem 8 pixel a jobb, lehet írni:
Fksirovannoe helymeghatározás
Fix elhelyezése nagyon hasonlít az abszolút. Az egyetlen különbség -, hogy tartalmaz egy blokk - ez mindig a böngésző ablakot.
Még ha lapozunk egy ablak, ez az elem továbbra is ugyanazon a helyszínen az oldalon.
De meg kell adni hitelt Microsoft. Bár lassan, de hozza a böngésző szabványoknak. Különösen IE7 összesen: fix és ott is működik, ahogy kellene. Talán egyszer majd élni fogunk fel az IE, amely teljes mértékben támogatja a szabványokat :).
Z-index
Viszonylag elhelyezett elemek található egy helyen, amint az a másik. Abszolút elhelyezett és rögzített elemek eltávolítása a dokumentum szerkezetét. Mindhárom esetben lehetséges, hogy egyes elemek átfedik egymást.
Ahhoz, hogy egyértelműen meg kell határozni, hogy milyen sorrendben elemek jelennek meg, és vezette be z-index. Érvényes értékei az ingatlan - az egész számok (beleértve a negatív).
Z-index - ez olyan, mint egy harmadik dimenzió a weboldalt. Minél nagyobb az érték a z-index, annál közelebb a felhasználó (azaz ki) egy oldalon eleme.