megjegyzi coder
Susy a tanulmány egyik kérdés, amely mindig ott állt előttem, ez volt: „Hogyan lehet eltávolítani a padding vagy árrés az első és az utolsó oszlop az oszlop elrendezés Susy nélkül CSS-tulajdonságok az első gyermek és az utolsó gyerek? ”.
Ez a kérdés az egyik legfontosabb az összes, akik most kezdik a tanulmány Susy. Ha megnézzük a gyökér a kérdés, alapvető lényege lehet a következőkben foglalhatók össze (ahogy azt a sok hozzászólás az interneten) kell használni benne az értéket az érték helyett után. Annak érdekében, hogy pontosan válaszolni erre a kérdésre, akkor szükség van egy jó megértése a helyzet ereszcsatorna árrés egészére hatással van az egész elrendezés létre Susy.
Mi - a helyét a behúzás ereszcsatorna
Hely francia csatorna lehetővé teszi, hogy teljesen megváltoztatja az egész elrendezést, hogy az oldal jött létre Susy. Ez a paraméter határozza meg, ahol az ereszcsatorna bentebb kell képest oszlopok oszlopok. Továbbá, ez a beállítás határozza meg, hogy az ereszcsatorna árrés lesz CSS-tulajdonságok padding vagy árrés.
Ez a lehetőség, hogy többek között a globális beállításait a változó $ susy. Egy másik változat szerint ez a paraméter lehet használni helyileg belül nyálkahal span. Kezdjük figyelembe véve az eset, amikor a helyét az ereszcsatorna bemélyedés által vezérelt globális változó $ susy.
Alapértelmezésben a helyét a behúzás Susy után határozzuk meg egy kulcsszót. Ezen kívül további lehetőségek is vannak: korábban. osztott. belül és belső-statikus. Az alábbiakban a teljes szintaxis a paraméter ereszcsatorna-pozícióját a globális változó $ Susy:
Kulcs szó zárójelben az lehetséges változatát beállítás ereszcsatorna-helyzetben.
Az egyértelműség érdekében, hogy megértsék a finomságok markup Susy használatakor az ereszcsatorna-helyzetben van szükség, hogy hozzon létre egy egyszerű szerkezet:
Ereszcsatorna-helyzetben: miután
Az alapértelmezett érték az ereszcsatorna-helyzetben paraméter a kulcsszó után. Ez az érték teszi Susy helymeghatározó behúzás ereszcsatornák után jelölés oszlopban. Ebben a módban, el kell távolítania a behúzás az utolsó oszlop a jelölésben. Ebben az esetben a behúzás ereszcsatornák a CSS-tulajdonságok margin és elhelyezni az elrendezés a következő:
Ha az alapértelmezett értékeket ereszcsatorna-pozíció beállítása nyálkahal span létrejön a három CSS-szabályok - szélesség. margin-right és float: left:
Ebben a kódot, margin-right tulajdon - ez tagolt ereszcsatorna. Susy létre a jelölést.
Akkor használja a kulcsszó, hogy távolítsa el az utolsó szélsőséges árrés oszlop:
Ennek eredményeként megkapjuk az eredményt, mint a margin-right: 0:
Tekintettel jelölő Kapcsolat régióban 3 tart tartalom a 4. oszlopról Ugyanakkor oldalsáv régióban található ugyanarra az oszlopra 4. Ezen túlmenően, az oldalsávon az utolsó eleme a jelet, így a kód a rendezvény:
Gyors következtetés: az érték beállítása után ereszcsatorna-helyzetben a leginkább intuitív esetben hozzon létre jelölő Susy. Ha az alapértelmezett értékeket csak pont, hogy tartsa szem előtt tartva - úgy, hogy távolítsa el a behúzás az utolsó oszlop elrendezés a kulcsszó utoljára.
Ereszcsatorna-helyzetben: mielőtt
Érték előtt az egyik előző értékét - után. Ennek lényege, hogy az érték is egyszerű. Ahelyett, hogy a behúzás ereszcsatorna után oszlopok (mint ez a helyzet után), elé az oszlopok az értéket, mielőtt a behúzás ereszcsatorna. Ebben az esetben el kell távolítani a behúzás az első oszlopban a jelölésben. ereszcsatorna padding is ebben az esetben a CSS-tulajdonságok margin:
Ha az értékeket, mielőtt az ereszcsatorna-pozíció beállítása nyálkahal span generál három CSS-szabályok: szélesség. margin-left és float: left kód használatával:
A kapott CSS-kód így fog kinézni:
Mivel az érték előtt ellentéte az értékek után. akkor nagyon könnyű megérteni, ha már végzett a jól után. Ahelyett, hogy egy kulcsszó, hogy távolítsa el az utolsó bekezdésében az utolsó oszlop elrendezés, ebben az esetben, akkor kell használni a kulcsszó, hogy távolítsa el az első francia az első oszlop elrendezés:
Az eredmény pontosan ugyanazt az elrendezést, mint az előző esetben.
Összefoglaló következtetés: a kapott értékeket a számlálás előtt pontosan ugyanaz, mint az előző esetben. Az egyetlen különbség az, hogy egy kulcsszó első oszlop az első jelölést.
Ereszcsatorna-helyzetben: split
Jelentése osztott paraméter ereszcsatorna-helyzetben alapvetően eltér az előző két érték előtt és után. Ha az érték szét. a szélessége a mélyedés ereszcsatorna felezve (fél), és mindkét felét a bemélyedés található mindkét oldalán egy oszlop. Ebben az üzemmódban a behúzás ereszcsatornák generált CSS-kódot CSS-tulajdonságok margin. Ebben az esetben nincs szükség, hogy távolítsa el a behúzás az extrém jelölő oszlopok:
Ha, mint a mi esetünkben is csak két egységet (a .content és .sidebar osztály), a teremtés egy ilyen elrendezés egyszerű. Ez elég ahhoz, hogy használni függvényében span. a szokásos módon:
A helyzet azonban nem ilyen egyértelmű, vagy ha a blokk .content .sidebar egység tartalmaz önmagukban leszármazottja blokkokat.
Adjunk hozzá két blokk div .child-egy osztályban, és az osztály .child-két belső .content egységet, hogy bemutassa ezt a helyzetet:
Mind az újonnan létrehozott blokk ugyanezt a megközelítést, mint korábban. Block .child-egy osztály szélessége 2 oszlop 3; az osztály blokk .child-kettő szélessége az 1. oszlopban 3.
Figyeljünk arra, hogy a határok mindkét .child-on blokkok és .child-kettő nem esik egybe a határokat a háttér rács!
Ez azért van, mert ha meg az ereszcsatorna-helyzetben paraméterértékek osztott meg kell vizsgálni a kapcsolat a szülő és az egységek egységek-leszármazottak. Ebben a konkrét esetben a szülő blokk .content. és a blokkok leszármazottai .child-on és .child-kettő.
Hogy megteremtse a megfelelő pozícióba ebben az esetben meg kell adni egy kulcsszót fészket a szülői egységet annak jelzésére, hogy ez a blokk éppen a unit-szülő:
Most nézd meg, hogy pontosan a két egység .child-on és .child-two` fér bele a rács határ „festék” a háttérképet!
Első pillantásra, a helyzet egy kicsit zavaros. A félreértések elkerülése érdekében mindig emlékeznünk kell arra, hogy ha szükséges, adja meg a leszármazottja blokkokat pontosan a rács határokat, akkor használja a kulcsszó az a szülő egység.
Ha a „dig” mélyebb és elemezze a generált CSS-kódot, akkor észrevehetjük, hogy .child-on blokkok és .child-két teljesen más:
Blokk szülő elhagyta fürdés float: left és szélessége, amely százalékban; ahol a behúzás szélessége ereszcsatornák e blokk figyelmen kívül (75% egyenlő 3/4).
Blocks-leszármazottai az összes ugyanolyan tulajdonságokkal rendelkezik, mint a szülő blokk. De ugyanakkor behúzás ereszcsatornák zajlanak ezek a blokkok.
Összefoglaló következtetés: split érték drasztikusan eltér a két korábban tárgyalt előtt és után értékeket. Ha az osztott értékek szükségesek hozzá egy kulcsszót fészek blokk-szülő és használata myxines átfogja az összes utód blokkokat.
Csatorna-helyzetben: belső / belső-sztatikus
Mindkét érték belül és azon belül statikus nagyon hasonlít az előző érték osztott. Behúzások csatornák is kétfelé osztjuk (fél), és mindkét felét helyezzük mindkét oldalán az egyes oszlopok. Azonban ebben az esetben a CSS-output eltolások padding tulajdonság. ahelyett árrés. Szintén ebben az esetben nincs szükség, hogy távolítsa el a padding a külső oszlopok a jelölésben:
Behúzást ereszcsatornák esetében ereszcsatorna-position: belülről ugyanaz az elv, mint a szó jelentését osztott. Ha a szülői egység nincs megadva kulcsszó fészket. A leszármazott blokkok túlmutatnak a jelölést a határ.
Ha csak hozzá egy kulcsszót fészket a szülői egység .content. ennek eredményeként megkapjuk a következő:
Az érték belső statikus ugyanolyan jól működik, mint az érték benne. Az egyetlen kivétel az, hogy az elért hozam ereszcsatornák rögzített egységek, nem pedig egy százalékos. Ezen túlmenően, a globális változó $ susy oszlop szélességű kell állítani az oszlop jelzi az oszlop szélességét.
Gyors következtetés: belső érték is ugyanolyan jól működik, mint az értéke az osztott. Amikor belsejében használt értékeket kell hozzá egy kulcsszót fészek blokk-szülő és használata myxines átfogja az összes utód blokkokat.
Jelentése osztott belsejében, és ugyanaz a CSS által generált kód, így lehet könnyen változtatni ezen értékek között a globális változó $ susy paraméter ereszcsatorna-helyzetben.
következtetés
Különböző típusú jelölések Susy kiválasztásával létrehozott ereszcsatornák behúzás elrendezésben. Különböző helyen ereszcsatornák behúzás minden esetben saját hirtelen fordulat, és megköveteli annak megértését, a folyamat, ha azt szeretnénk, hogy használja őket hatékonyan.
Két alapvető módon lehet létrehozni egy elrendezés segítségével a behúzás ereszcsatornák:
értékek előtt és után a behúzás ereszcsatorna jönnek létre az egyik oldalon az egyes oszlopok oszlop; extrém oszlop, el kell távolítani a behúzás ereszcsatorna a kulcsszó első vagy az utolsó.
értékeket benne. belsejében statikus. osztott megosztani mindegyik bemélyedés ereszcsatorna két egyenlő részre, amelyek vannak elhelyezve mindkét oldalán minden oszlop oszlop. Ezek az árrések nem kell eltávolítani.