A CSS úszó tulajdonság használata a weblapelrendezések tervezéséhez
A CSS tulajdonság egy nagyon fontos tulajdonság az elrendezéshez. Lehetővé teszi, hogy a weboldal tervét pontosan úgy állítsa be, ahogyan azt szeretné, hogy megjelenjenek, de annak használatához meg kell értened, hogyan működik.
Egy stíluslapban a CSS float tulajdonság így néz ki:
igaz (float: jobb; }
Ez azt mondja a böngészőnek, hogy minden, ami a "jobb" osztályával jobbra lebeg.
Ön így rendelné hozzá:
class = "jobb" />
Mit tudsz lebegni a CSS úszó tulajdonsággal?
Nem tudja lebegni minden elemet egy weboldalon. A blokkszintű elemeket csak floatálhatja. Ezek azok az elemek, amelyek egy oldalon lévő blokkot foglalnak el, mint a képek (), a bekezdések (), a megosztások () és a listák ().
Más elemek, amelyek befolyásolják a szöveget, de nem hoznak létre fiókot az oldalon, inline elemek, és nem lebegtethetők. Ezek olyan elemek, mint a span (), a vonalszakaszok (), az erős hangsúly () vagy a dőlt ().
Hol hajnak?
Az elemeket jobbra vagy balra úszhatja. A lebegő elemet követő elemek a másik oldalon lévő lebegő elem körül áramlanak.
Ha például a baloldali képre lebegnek, akkor minden szöveg vagy más elem, amely jobbra fordul, körülveszi. És ha jobbra fekszem egy képet, akkor minden szöveg vagy más elem, amelyről balra fordulhat. Az a kép, amelyet egy szövegblokkba helyeznek, amelyen úszó stílust alkalmaznak, megjelenik, azonban a böngésző megjeleníti a képeket.
Ez általában a következő szöveg első sorával jelenik meg a kép alján.
Mennyire fognak lebegni?
A lebegett elem a konténer elem bal oldalán vagy jobb oldalán halad, amennyire csak tud. Ez számos különböző helyzetet eredményez attól függően, hogy hogyan íródott a kódod.
Ezeknél a példáknál balra egy kis DIV elemet fogok lebegni:
- Ha a lebegtetett elemnek nincs előre meghatározott szélessége, akkor annyi vízszintes helyet fog igénybe venni, mint amennyi szükséges és elérhető, függetlenül az úszólagtól. Megjegyzés: egyes böngészők megpróbálnak elemeket elhelyezni lebegő elemek mellett, ha a szélességet nem definiálják - általában csak kevés helyet ad a nem lebegő elemeknek. Ezért mindig meg kell határoznod a szélességet a lebegő elemeknél.
- Ha a konténer elem a HTML elem, a lebegő DIV az oldal bal szélén helyezkedik el.
- Ha a konténerelem önmagában tartalmaz valamit, az úszó DIV a konténer bal szélén ül.
- Lebegő elemeket fecsérelhet, ami az úszót meglepő helyen végződhet. Például ez a lebegő egy lebegett DIV a jobb oldali lebegő DIV belsejében.
- A lebegő elemek egymás mellé ülnek, ha van hely a tartályban. Például ez a tartály három, 100px széles DIV elemet tartalmaz egy 400px széles konténerben.
A galériák elrendezésének létrehozásához még úszók is használhatók. Az egyes indexképeket (ez a legjobban működik, ha mindegyike azonos méretű) van egy DIV-ben a felirat és az úszó DIV elemek a konténerben.
Nem számít, milyen széles a böngészőablak, a bélyegképek egyenletesen állnak egymással.
Az úszó kikapcsolása
Miután tudod, hogyan kell egy elemet úszni, fontos tudni, hogyan kapcsolhatod le az úszót. A floatet a CSS clear tulajdonsággal kapcsolja ki. Törölheti a baloldali úszókat, a jobb úszókat vagy mindkettőt:
tiszta: balra;
világos: helyes;
világos: mindkettő;
Minden olyan elem, amelyre az egyértelmű tulajdonságot állította be, egy olyan elem alatt jelenik meg, amely lebegett az adott irányba. Például ebben a példában a szöveg első két bekezdése nem törlődik, de a harmadik.
Játsszon a dokumentum különböző elemeinek világos értékével, hogy különböző elrendezési hatásokat érjen el.
Az egyik legérdekesebb lebegett elrendezés egy képsorozat a jobb oldali vagy a bal oldali oszlopban a szövegrészek mellett. Még akkor is, ha a szöveg nem elég hosszú ahhoz, hogy a kép mögé görgethessen, használhatja az összes képet az összes képen, hogy meggyőződjön róla, hogy azok az oszlopban jelennek meg, nem pedig az előző kép mellé.
A HTML (ismételje meg ezt a bekezdést):
Duis aute irure dolor sed do nemusmod tempor incididunt a reprehenderit in voluptate. Cupidatat nem vádló, labour et et dolore magna aliqua.
A CSS (a képek balra történő lebegéséhez):
img.float {float: left;
egyértelmű: left;
margin: 5px;
}
És jobbra:
img.float {float: jobb;
egyértelmű: jobb;
margin: 5px;
}
Floats for Layout használata
Miután megértette, hogy az úszó tulajdonság hogyan működik, elkezdheti használni a weboldalak megjelenítéséhez. Ezek a lépések, amelyeket egy lebegő weboldal létrehozásához használok:
- Tervezze meg az elrendezést (papíron vagy grafikus eszközön vagy a fejemben).
- Határozza meg, hol lesznek az oldalosztások.
- Határozza meg a különböző tartályok szélességét és a benne lévő elemeket.
- Mindent lebeg. Még a legkülső konténer elem balra is lebeg, így tudom, hogy hol helyezkedik el a böngésző nézet portjához képest.
Amíg ismeri az elrendezési szakaszok szélességét (százalékok finom), használhatja az úszó tulajdonságot arra, hogy helyezze el azokat, ahol az oldalhoz tartoznak. És a szép dolog az, hogy nem kell aggódnia annyira, hogy a doboz modellje más az Internet Explorer vagy a Firefox esetében.