Saját kinyilatkoztatás

Hol vagyunk

Az előző cikkemben fordítani a CSS beszélek alapelveit CSS és tipikus esetei annak használatát. Voltak alapjait CSS, lehetséges típusú szelektor, HTML struktúra szempontjából CSS. Már szerepel a leggyakoribb CSS tulajdonságokat, és megmutatta, hogyan lehet beállítani az oldalt elemekkel. Azt fordított elég figyelmet a CSS tulajdonságok felelősek kitöltés és a határ renderelés szöveget, képeket, linkeket és listákat. Végül telepedett viselkedése specifikus stílus táblázatok.

Minden jó, de még mindig nyitva hagyja a kérdést, hogy a használata CSS stílusok kialakulásának szerkezetét és elrendezését is. Korábban, amikor a CSS, kevesen tudták, hogy csak akkor képződik, mint a hatékony technológia erre a célra szinte az egész világon használják a táblázatban. Ezek általában elfoglalják a helyet az oldalon, és használja a sejteket az asztal kérte a régiók elhelyezésére az egyes szakaszok. A jelenléte az ilyen tulajdonságok például a colspan és rowspan. amelyek rendre lehetővé teszik a ragasztó sorban több oszlop és több sor egy oszlopban, így még nagyobb rugalmasságot jelölő előre meghatározott módon. Nagyon gyakran, mint a cella tartalmát használni beágyazott táblázatok, ami viszont megvan a beágyazott táblázatok. Ez az oldal felépítése abban az esetben nagy mennyiségű elnehezült, trudnopodderzhivaemoy és nem rugalmas. Tegyük fel, hogy annak érdekében, hogy mozog az egyik rész a másik oldalán néhány sluagh kellett ülni az órát, és kézzel átírni az elrendezés újra.

Most, a használata CSS mindent sokkal könnyebbé vált. Elég, ha külön a tartalmát a kívánt részt egy külön rétegben a div tag és csak kérni neki a szabályokat a helymeghatározás olyan oldalon CSS tulajdonságokat. Ha később szükség lesz mozogni ebben a szakaszban az ellenkező oldalán - egyszerűen változtatni a CSS tulajdonságokat ne érjenek ugyanakkor a legtöbb oldal kódja. Ez nagyon egyszerű és kényelmes. Ahhoz azonban, hogy mi volt látszólagos egyszerűsége Kell egy kis mélyebben ismeri a lehetőségeit adatokat.

Ebben a cikkben fogok beszélni néhány módszert oldal elrendezés, hogyan kell használni őket, és hogyan lehet létrehozni őket. De kezdjük csak egy sort.

Lehetőségek oldal elrendezését.

Oldal fix szélességű. Ezeket az oldalakat ogranitsenie a szélessége elemei, és függetlenül, hogy milyen méretű a böngésző ablakot - a szélessége a régiót használjuk rögzített és nem változik a minta a munka során az oldalhoz. Ezek az oldalak használják olyan helyeken, ahol ustanvleny szigorú követelményeket a kijelző elemek az oldalon, és hogy ez mit nekontrolliruemoe burjánzó elemek egyszerűen elfogadhatatlan. Ilyen esetekben általában egy fix szélessége a body tag és középre az oldal szélessége a böngésző ablakot. A leggyakoribb érték a szélessége az oldalon egy fix szélességű: 960 x - akkora, mint egy oldal, amely lehetővé teszi egy jó nézd meg a képernyő felbontása 1024x768 kezdve.

Pages úszó szélességét. - Az ilyen típusú oldal szélességét elemében nem határozták meg, és azok szabadon módosíthatja a méretei, terjed a képernyőn vagy a szülő részt, és vesz fel az összes rendelkezésre álló helyet. Ez a megközelítés a legmegfelelőbb alkalmazni, ha a fő cél az, hogy az oldal megjelenítéséhez a szöveget. Más esetekben a kérelmet az ilyen megközelítések teheti meg a Don Quijote, értelmetlen harcok szélmalmok van, bármilyen módon az Ön esetében a böngészőt.

„Rugalmas oldalon.” Ezek az oldalak egyesítik mindkét megközelítés. Az elemek ezeken az oldalakon van egy fix szélességű, de tudja húzni, vagy zsugorodik szélességétől függően a böngésző ablak a beállított tartományban. Ezekre a célokra használhatja tulajdonságait min-height. min-szélesség. max-magassága és max-width. Már említettem az első rész.

Annak érdekében, hogy a lehető legjobb eredményt, gyakran van értelme, hogy egyesítsék mindhárom megközelítést oldal elrendezés: például minden támogató és navigációs rész - ami elfogadhatatlan ellenőrizetlen terjedése elemetnov - hogy fix szélességű, és a központi panel, hogy a „rugalmas”, vagy akár hagyja, hogy kölcsön az összes helyet után fennmaradó fix részei a böngésző ablakot.

Módszerek oldal elrendezés

CSS lehetővé teszi, hogy hatékonyan hajtsák végre az elrendezés segítségével a különböző módszerek és technikák. A leggyakoribb módszerek közé úszó réteg (az angol nyelvű források, ezt a technikát nevezik úszó elrendezés) és abszolút pozicionálás (abszolút pozicionálás). Sőt, a szubjektív jelölés abszolút többsége használó oldalak imennno úszó réteget. Következő megpróbálom úgy mindegyik módszer részletesebben.

lebegő rétegek

Úszó réteg által megvalósított manipuláció az ingatlan lebegni eementov oldalon. Ezzel a réteg tulajdonságai, bekezdések, és egyéb elemek is elhelyezhető a bal vagy a jobb oldali vagy a jobb oldalán a külső tartály. Ehhez be kell állítani a tulajdonság úszó a megfelelő értékek: float: balra, jobbra, semmi;. A maradék tartalmát az oldal lesz „körül” elem van nyomva az egyik fél. Egy nagyon fontos pont, hogy meg kell jegyezni, hogy a tartalma körül elemetn lebegnek csak akkor, ha az alább meghatározott ezt a címkét az oldal kódja és a szélessége nem több, mint a többi oldal szélességének vagy külső tároló. Ezért ebben az esetben nagyon fontos, hogy meghatározzák a sorrend a leírás elemetnov oldal HTML-fájlként.

Néha vannak olyan helyzetek, amikor szükség van rá, hogy mi lenne, hogy a tartalom nem vesz körül egy eleme az úszó és alább közölt ezt az elemet. Egy példa egy ilyen helyzet lehet panel-footer, ami mindennek ellenére mindig legyen a az oldal alján. Lehet jön a támogatás egyértelmű tulajdonság, hogy elfogadja a következő értékeket: egyértelmű: left; jog; mindkettő; nincs. Ez a funkció kényszeríti a tartalmát alább közölt az úsztatott elem. És ezzel a tulajdonság értéke lehet állítani, hogy bármilyen úsztatott elem tartozik: a bal vyravnimaniem, jobbra és így és így, vagy sem, hogy az egyik, sem a másik. Tehát, ha van egy elem float: left. e feküdne alább megjelenő nem engedik neki, hogy ez az elem körül is fel kell használnia egyértelmű: balra.

Azonban a leírt funkciókat természetesen nem elég hatékony végrehajtása az oldal elrendezését. Most van itt az ideje foglalkozni eljárások finomhangolás a jelölést. A sulchae úszó rétegek helyzetét oldalelemek vízszintesen Főszabályként készlet segítségével CSS tulajdonságok margin, amely, mint már tudjuk, arra használható, hogy a távolság a széle egy elem egy másik elemmel. Első pillantásra úgy tűnhet, egy kicsit furcsa, és nem praktikus. Azonban ez csak első pillantásra. Az egyedülálló tulajdonsága ez a tulajdonság, hogy lehet beállítani a negatív érték, ezzel kiszorítva elem képest balra az eredeti helyzetébe érte. Nos, és ennek megfelelően a pozitív érték eltolódik az elemet a jobb (sőt, természetesen elem a helyén marad, csak új ingatlanokat mozgástere elemetna vizuálisan mozog ez egy előre meghatározott érték).

Így lehetőség van arra, hogy elemetnov rögzíteniük szélessége és magassága a szélesség és a magasság, illetve adja meg a kívánt értékeket és árrés úszó, és élvezze az eredményt. További intézkedésekre van korlátozott, csak a képzelet és a találékonyság. Példaként akarom mutatni, hogyan lehetne jelölni az oldalt. Az alábbiakban egy minta oldalt razbyty szakaszokra és CSS-file-kód és HTML oldalakat.

abszolút pozicionálás

Abszolút pozicionálás. mint mondtam, nem használják olyan gyakran, mint úszó réteg, hanem figyelmet érdemel. Néha előfordul, hogy a felvételi lebegő rétegek elfogadhatatlan valamilyen oknál fogva, és így minden marad számunkra ebben a helyzetben - ez abszolút pozicionálás. Azonban a legtöbb abszolút pozicionálás használják a szennyező helyzet - meghatározó elhelyezése egyik eleme a másikhoz képest helyzetébe. Egyébként erről a felvételi van szükség.

Ennek alapján a megoldás alkalmazása tulajdonságait pozícióját. amely a következő értékeket: pozíció: abszolút, relatív, fix, állandó. Jelentése abszolút - meghatározza az elem pozícióját képernyő koordináták, vagy a szülő elem, amint azt az alábbiakban bemutatjuk. relatív - meghatározza a pozícióját az alapértelmezett helyre. Amikor megadja az eltolás érték használata, az oldal a „lyuk”, így egyre szélesebb körben, így nem szükséges, mint akkor - egy kicsit később. fix - pozícióját adja a képernyőn, függetlenül attól, scroll, hogy nem számít, hogy mennyit nem lapozzunk görgetősáv - elem marad a helyét. Az érték a statikus - rendes elhelyezése, ha nincs megadva rangsor elemetna típus, ez az érték vonatkozik umlochaniyu.

Ha a pozíció tulajdonság egy elem, akkor van értelme, hogy a tulajdonságokat meghatározó koordinátáit az elem: felső, alsó, bal és jobb. Például, meghatározva a helyzetben bármely elem: abszolút. Beállíthatjuk, hogy a fent említett tulajdonságok alapján egyik vagy másik határon a böngésző ablakot. Azonban, ha beszélünk, amit egy sejt, például, a rétegen belül, az abszolút pozíció az elem végezzük, tekintettel a határait a rétegben.

Hogy tisztázza a fenti, fontolja meg egy egyszerű példát. Tegyük fel, hogy van egy cím, és állítsa be a képet a fejléc. Ezután a helyzetben van, hogy ezt a ugyanazt a címet lehet beállítani az alábbiak szerint: