Float és tiszta css - Eszközök blokk elrendezés
Üdvözlet, kedves olvasók webcodius.ru blog. Ma továbbra is tanulmányozza és fontolja meg a CSS szabályt úszót és tiszta, nagy jelentőséggel bírnak a blokk elrendezés oldalakon.
Létrehozása lebegő edényben float
Példa létre egy blogot a WordPress 4
Kezdetben a weboldal elemek vannak elhelyezve egymás mögött, abban a sorrendben, amelyben meghatározott egy html-kódot. Azáltal kódot bekezdés tag, fejezetek, listák, stb Az oldalon látjuk őket ugyanabban a sorrendben. De néhány CSS jellemzők tudjuk változtatni ebben a sorrendben. Egy úszó.
float szabály lehetővé teszi számunkra, hogy hozzon létre egy úgynevezett lebegő elemek. Ez azt jelenti, tudjuk meg a blokk eleme van jobb vagy bal szélén a szülő elem (a blokk a tartály, amelyben van ágyazva, vagy a web-oldalak). Ebben a blokkban elem nyomódik a megfelelő szélén a szülő, és a többi a tartalom fog folyni körülötte az ellenkező oldalról. Mint láttuk a tiszta html, tekintetbe az align attribútum értékeit balra és jobbra az img tag, mellyel beszúrni képeket a weboldalon.
Ez a szabály lehet három lehetséges értékek:
Alapértelmezésben ez használ egy lebegőpontos érték sem. vagyis az elemek nincs áramlás, és a sorrendben egymás után.
Az értékek a bal és jobb align weboldal elemek, illetve a bal és jobb széle a szülő elem, és a többi tartalom fog folyni körül a szemközti oldalon.
Vegyünk két blokkot tartalmaz. A kezdéshez egyszerűen kiemelje a háttér különböző színekben segítségével háttér szabályok:
És most az első és a div-let felírni úszó jellemzően balra érték, és megkérem keresztül behúzás tulajdonságok margin az érthetőség kedvéért kölcsönhatása a szomszédos tag:
Mint látható, az első div lett igazítva a bal és a tartalmát a szomszédos cella szalonna tekerje körül a jobb oldalon.
A szabályok alkalmazását, hogy az úszó sort elem, az utóbbi kezd viselkedni, mint egy blokk-szintű kölcsönhatás egyéb elemei a web-oldalakat. Például normális helyzetben, magasság, szélesség szabályok sorok nem fog működni. De alkalmazása után az attribútum úszó, méretparaméterek egyszerre kezdenek van értéke.
Nézzük hozzá az előző példákban a span és méretét írják neki a stílus:
A tartalom a vonal elem span
Az ábra azt mutatja, hogy a szabályok a szélességét és magasságát a span-, és nem működött, méretei egyformák legyenek összhangban annak tartalmát.
Most adjuk hozzá a span elem általában úszik balra értelmében:
A tartalom a vonal elem span
Most a span elem összhangban szerzett méretek CSS-szabályok és a szomszédos acél elemek áramlik körülötte a jobb oldalon. Ebből arra lehet következtetni, hogy ez a szabály is használható, mint egy úszó kisbetűk és blokkolni elemekkel. Sőt, függetlenül attól, hogy melyik elemet használnak rendszerint akkor válik a blokk.
Mi van, ha beállította az azonos értékű float style attribútum több egymást követő eleme? Lássuk:
A tartalom a vonal elem span
Ezek egymás mellett vízszintesen egymással abban a sorrendben, amelyben bejegyzett egy HTML-kódot, és összhangba hozzák a megadott szélén a szülő elem.
Továbbra is megjegyezni, hogy általában úszó használatban a blokk elrendezés alapján az úszó konténerek. Az alkalmazás egy ilyen tervezés gyakran kell helyezni azokat az elemeket, az alábbi azokat, amelyek igazodik a jobb vagy bal szélén. Ha egyszerűen eltávolítani őket lebegni stílus szabály vagy a Nincs rá, az eredmény kiszámíthatatlan lesz. Ebben az esetben jön a támogatás általában egyértelmű.
szabály törlése
Példa létre egy blogot a WordPress 4
stílus tiszta tulajdonság lehetővé teszi, hogy világosan jelzik, hogy a blokk elem minden esetben határérték alatt kell lennie úszó konténerek. Más szóval, ha az elem van megadva ingatlan csomagolja lebegőpontos, akkor kikapcsolja azt egyértelmű lépéseket ezen oldalán. Meg lehet venni a következő értékeket:
Amikor tiszta egyenlő baloldali elem alatt helyezkedik el az összes elemet, amely a tulajdonságait úszó úgy van beállítva maradt. Ha törli ugyanazt a jogot, majd törölték csomagolást a jobb oldalon. És mind törli lezárja mindkét oldalán az elem. Value sem felülbírálja világos szabályok és ez az alapértelmezett.
Add az előző példában, az első blokk div általában egyértelmű: bal:
A tartalom a vonal elem span
Ezzel a szabállyal tettünk a div, hogy figyelmen kívül hagyja a lebegő elem bal.
A moduláris felépítés - hozzanak létre egy hasábos elrendezés segítségével úszó
Példa létre egy blogot a WordPress 4
Ahogy már mondtam, float tulajdonság nagyon alkalmas létre oszlopok blokk elrendezés. Amikor létrehoz egy elrendezést, akkor általában kell építeni a blokkok egymás mellett, de az alapértelmezett CSS blokkokat állni egymás alatt. Ebben az esetben a támogatás az úszó elemek és a float tulajdonság.
Tegyük fel, hogy azt szeretnénk, hogy egy két hasábos elrendezés egy fejléc és lábléc. A bal oldali mezőben, mi lesz a menü, és a jobb oldalon a fő tartalma a helyszínen. Indításához előírni egy html-kódot a megfelelő blokkok:
Tehát mi egy külön mondatban sapka (id = "header"), bal oldali oszlop (id = "leftbar"), a tartalmi terület (id = "content") és pince (id = "footer"). Mielőtt blokkot kell helyezni az alábbiakban a korábbi szomszédai tettem az üres konténereket a „CLR” class = attribútumot. És így ez a html-kód jelenik meg a böngészőben:
Amint az ábrán látható, a blokkok sorakoznak annak érdekében, fentről lefelé. Blocks létre most előírják a stílus css (kérjen egy blokk leftbar általában lebegnek, korlátozzák a szélességét a, leftbar-tartalom-a és határozza meg a mintát a blokkok):
CLR clear: both;
>
#leftbar float: left;
szélesség: 250 képpont;
háttér: # E6EDF1;
>
#content szélesség: 750px;
háttér: #fff;
>
#footer háttér: # 314451;
szín: #fff;
text-align: center;
>
És nézd, mi történt:
Látjuk, hogy a szabály float: left blokk leftbar úszni kezdett, és a tartalmát a tartalmi blokk, ahogyan folyik körülötte. Ahhoz, hogy ez ne történhessen meg kérjen tartalom külső blokk behúzás használatával margin-left szabályok 10 pixel nagyobb, mint a szélessége a blokk leftbar:
#content szélesség: 750px;
háttér: #fff;
margin-left: 260px;
>
Ennek eredményeképpen kaptunk egy két hasábos elrendezés az oldalon.
Nos, nézzük összefoglalni. Ebben a cikkben, néztük két CSS tulajdonságokat, amelyek alapján blokk elrendezés:
- lebegnek - használja úszó elemeket és lehetővé válik, hogy építeni blokkok egymással szomszédos;
- világos - törli az úszó szomszédos blokk úszó elemek.