Susy în studiul uneia dintre întrebările care au stat mereu în fața mea, a fost: „Cum să eliminați padding sau marja la prima și ultima coloană din structura coloana Susy fără a CSS-proprietăți ale primului-copil și ultimul copil? “.
Această întrebare este una dintre cele mai importante pentru toți cei care sunt doar începutul studiului Susy. Dacă te uiți la rădăcina problemei, esența ei de bază pot fi rezumate după cum urmează (măsurată prin mai multe posturi de pe Internet) trebuie să fie utilizate în interiorul valorii în locul valorii după. Pentru a răspunde la această întrebare cu precizie, aveți nevoie de o bună înțelegere a modului în care poziția marjelor de jgheab în ansamblul său are un impact asupra întregului aspect creat în Susy.
Ce este - localizarea jgheabului de indentare
Locul de amplasare liniuță jgheab vă permite să schimbați complet întregul aspect al paginii, care a fost creat în Susy. Acest parametru determină în cazul în care jgheabul trebuie să fie indentat în raport cu coloane coloane. De asemenea, această setare determină dacă marginile de jgheab vor fi CSS proprietăți de umplutură sau o marjă.
Această opțiune este de a fi printre setările globale ale $ Susy variabila. Alternativ, acest parametru poate fi folosit local în interiorul interval hagfish. Să începem prin luarea în considerare cazul în care locația indentare jgheab este controlat de $ Susy variabilă la nivel mondial.
În mod implicit, locația amprentei Susy determinată după un cuvânt cheie. În plus, există mai multe opțiuni: înainte. divizat. în interiorul și în interiorul-statice. Mai jos este sintaxa completă a jgheabului poziția parametru în $ Susy variabila la nivel mondial:
Cuvinte cheie în paranteze sunt posibile variante ale jgheab-poziția de setare.
Pentru claritate în înțelegerea subtilitatile de marcare Susy atunci când se utilizează poziția de jgheab este necesară pentru a crea o structură simplă:
Jgheab-position: după
Valoarea implicită pentru parametrul jgheab poziția este cuvântul cheie după. Această valoare face ca SUSY jgheaburi poziționare indentare după fiecare coloană de marcare. În acest mod, trebuie să eliminați adâncitura din ultima coloană din marcaj. În acest caz, jgheaburile de indentare sunt CSS-proprietăți margine și plasate în aspectul după cum urmează:
Dacă utilizați valorile implicite pentru jgheab poziția de stabilire durata hagfish creează trei CSS-reguli - lățime. marja de-dreapta și float: left:
În acest cod, proprietate marginea din dreapta - este indentat jgheab. Susy creat în marcaj.
Puteți utiliza cuvântul cheie pentru a elimina ultima marja extremă la coloana:
Ca rezultat, vom obține rezultatul ca o marjă-dreapta: 0:
Având în vedere marcare contact regiune 3 ia conținut din coloana 4. În aceeași regiune, bara laterală situată în aceeași coloană de 4. În plus, bara laterală este ultimul element al mărcii, astfel încât codul pentru acest eveniment este:
concluzie rapidă: valoarea după setarea jgheab poziția este cazul cel mai intuitiv crea markup Susy. Dacă utilizați valorile implicite numai punctul de a păstra în minte - este de a elimina adâncitura din ultimul plan coloană cu cuvântul cheie trecut.
Jgheab poziția: înainte
Valoarea înainte de una din valoarea anterioară a acestui - după. Esența acestei valori este, de asemenea, simplă. In loc de a plasa jgheabului indentare după coloane (așa cum este cazul, după), plasate înainte coloanele la valoarea dinaintea jgheaburile de indentare. În acest caz, trebuie să eliminați adâncitura din prima coloană din marcaj. jgheab de umplutură sunt, de asemenea, în acest caz, marja de CSS-proprietăți:
Când se utilizează valorile înainte de jgheab din poziția de stabilire durata hagfish generează trei CSS-reguli: latime. -Marja de stânga și float: left folosind codul:
Rezultat CSS-cod va arata astfel:
Deoarece înainte de valoarea este opusul valorilor după. atunci este foarte ușor de înțeles, dacă ați făcut deja cu bine dupa. În loc de a folosi un cuvânt cheie pentru a elimina ultima liniuță din ultimul plan coloană, în acest caz, trebuie să utilizați cuvântul cheie pentru a elimina prima liniuță din primul aspect coloană:
Rezultatul este exact același aspect ca și în cazul precedent.
Sumar concluzie: folosind valorile obținute înainte de numărarea exact la fel ca și în cazul precedent. Singura diferență este utilizarea unei prime coloană de cuvinte cheie pentru marcarea primul.
Jgheab-position: Split
Înțeles parametru divizat jgheab poziția este fundamental diferită de cele două valori anterioare, înainte și după. În cazul în care este împărțită valoarea. lățimea jgheabului indentare împărțit în jumătate (jumătate), și ambele jumătăți ale indentare sunt localizate pe ambele părți ale unei singure coloane. În acest mod jgheaburilor indentare generat în CSS-cod ca marja CSS-proprietăți. În acest caz, nu este nevoie de a elimina adâncitura pentru coloanele de marcare extreme:
În cazul în care, la fel ca în cazul nostru, există doar două unități (cu .content și clasa .sidebar), crearea unui astfel de aspect este simplu. Este suficient pentru a utiliza o funcție de durata. ca de obicei:
Cu toate acestea, situația nu este atât de clar, sau în cazul în care unitatea de bloc .content .sidebar va conține în ele însele blocuri descendent.
Să adăugăm două blocuri div cu .child-o clasă și clasa .child-două în interiorul unitate .content pentru a ilustra această situație:
Pentru ambele blocul nou creat aplică aceeași abordare ca și anterior. Bloc cu .child o singură clasă va avea o lățime de 2 coloane 3; cu blocul de clasă .child doi vor avea o lățime de 1 coloana 3.
Să acorde o atenție la faptul că frontierele ambelor blocuri .child-unu și .child-două nu coincid cu limitele grilei de fundal!
Acest lucru se datorează faptului că, atunci când setați pentru jgheab poziția valorilor parametrilor divizat este necesar să se ia în considerare relația dintre mamă și unități ale unităților-descendenților. În acest caz particular, blocul părinte este .content. iar blocurile sunt descendenții .child-unu și doi-.child.
Pentru a crea marcajele corecte în acest caz, trebuie să adăugați un cuvânt cheie cuib unitatea părinte pentru a indica faptul că acest bloc este tocmai unitatea-mamă:
Acum, uita-te la modul exact cele două unități .child-unul și .child-two` se încadrează în frontiera grila, „vopsea“, imaginea de fundal!
La prima vedere, situația este un pic confuz. Pentru a evita confuzia, trebuie să ne amintim întotdeauna că, dacă este necesar, introduceți blocurile descendente exact în limitele de rețea, ar trebui să utilizați cuvântul cheie pentru unitatea lor mamă.
În cazul în care „dig“ mai adânc și analiza CSS-cod generat, veți observa că blocurile .child-unu și doi-.child este complet diferit:
Bloc-mamă a lăsat float înot: stânga și lățime, care conține în procente; în care jgheaburile lățime scobitură acestui bloc este ignorat (75% egal cu 3/4).
Blochează-descendenți au toate aceleași proprietăți ca blocul părinte. Dar, în același jgheaburile de indentare au loc pentru aceste blocuri.
Sumar concluzie: Valoarea este împărțită în mod drastic diferite de cele două discutat anterior înainte și după valori. Când se utilizează valorile necesare pentru a împărțit adăuga un cuvânt cheie la cuib bloc-mamă și de a folosi myxines cuprind toate blocurile de descendenți.
Jgheab-position: interior / interior-statice
Ambele valori în interiorul și în interiorul-statice sunt foarte asemănătoare cu împărțirea valorii anterioare. Indents jgheaburi se împart în jumătate (jumătate), iar ambele jumătăți sunt plasate pe ambele părți ale fiecărei coloane. Cu toate acestea, în acest caz, offset-CSS-ieșire sunt proprietatea padding. mai degrabă decât marja. De asemenea, în acest caz nu este nevoie de a elimina capitonarea din coloanele exterioare din markup:
Indents jgheaburi, în cazul jgheab poziția: în interiorul au același principiu ca și în secțiunea de înțeles. Dacă unitatea părinte nu este specificat cuib de cuvinte cheie. blocurile descendente depășesc marcarea frontierei.
Dacă doar adăugați un cuvânt cheie pentru a cuib unitatea părinte .content. ca rezultat vom obține următoarele:
Valoarea lucrărilor de interior-statice la fel de bine ca și valoarea în interior. Singura excepție este faptul că marjele obținute în jgheaburi fixe unități, mai degrabă decât un procent. În plus, variabila $ susy coloană lățimea globală trebuie să fie setat la coloana care indică lățimea coloanei.
concluzie rapidă: în interiorul valorii funcționează la fel de bine ca și valoarea scindării. Atunci când este utilizat în interiorul valorilor necesare pentru a adăuga un cuvânt cheie în cuib bloc-mamă și de a folosi myxines cuprind toate blocurile de descendenți.
Înțeles divizat în interiorul și au același cod generat-CSS, astfel încât se poate schimba cu ușurință între aceste valori într-o variabilă $ parametru Susy jgheab poziția globală.
concluzie
Diferite tipuri de marcaje în Susy create prin selectarea jgheaburilor aranjament indentare. Diferite jgheaburi locație adâncitură în fiecare caz are propriile idiosincrasii și necesită o înțelegere a procesului, dacă doriți să le folosească în mod eficient.
Există două moduri de bază pentru a crea un aspect cu ajutorul jgheaburilor de indentare:
valorile înainte și după indentare jgheaburile sunt create pe o parte a fiecărei coloane coloană; pentru coloana extremă, trebuie să îndepărtați jgheabul indentare folosind cuvântul cheie primul sau ultimul.
valori interior. în interiorul-statice. divizat parts fiecare jgheab scobitură în două jumătăți egale, care sunt dispuse pe ambele părți ale fiecărei coloane de coloană. Aceste marje nu trebuie să fie eliminate.