Probleme css

Pentru multe lucruri, css, nu a fost intenționată inițial, de exemplu pentru: multicolumn, design web receptiv etc. De aceea, el a devenit un limbaj plin de hack-uri și glitches, ca o mașină antică cu o grămadă de extensii.

În cel mai bun caz - lucrul cu CSS poate fi numit o activitate distractivă. Și asta ne face să muncim. Pentru că, după cum cred, generarea de stiluri eficiente și cross-browser css este imposibilă și nu va fi posibilă în viitorul apropiat.

Să ajungem la subiect, pentru că nu sunt aici pentru a-mi exprima opinia despre CSS. Și pentru a lua în considerare o serie de probleme întâlnite frecvent în CSS și soluțiile posibile.

Am încercat să aleg câteva foarte frecvente:

Purge plutitoare.
Cum să învingeți indentarea între elementele cu bloc inline?
Înțelegerea poziționării absolute.
Când să setați lățimea / înălțimea la 100%? (partea 2)
Cum să nu fi prea inteligent cu z-index. (partea 2)
Ce este colapsul marjei? (partea 2)

Purge plutitoare.

Mi se pare că aceasta este cea mai obișnuită întrebare din css. Este bătrân ca lumea, sincer, sunt o mie de procente sigur că cineva care cel puțin o dată a scris pe CSS a venit peste el.

Cuvintele simple pot fi descrise după cum urmează: atunci când un element conține numai elemente cu float, acesta se prăbușește ca și cum nu ar exista deloc elemente copil în el. Aceasta este, de fapt, elemente care plutesc din fluxul total.

Există câteva modalități de a rezolva această problemă. Anterior, am folosit o div divizată cu stilul "clar: ambele" în partea de jos a containerului. Apoi, l-am înlocuit cu eticheta hr, care nu este mult mai bună.

În cele din urmă, Nicolas Gallagher a sugerat o nouă modalitate de a curăța plutitorii fără a trebui să atingă marcajele. După discuții și teste lungi, am obținut minimul necesar pentru munca sa, un set de stiluri, aici este cea mai recentă versiune:

De fapt, am mințit, nu este ultimul, este cel mai scurt. Dar dacă aveți nevoie de suport IE 6/7, atunci trebuie să adăugați mai multe din acestea:

Pentru a lucra, trebuie să adăugați clase .clearfix la proiectul dvs. și apoi să îl aplicați elementelor de marcare. Aceasta este cea mai ușoară și mai curată cale de a lucra cu flotoare.

Cum să învingeți indentarea între elementele cu bloc inline?

Continuați cu plasarea elementelor într-un rând, de data aceasta fără a utiliza float, dar folosind blocuri inline. afișare: blocarea inline pentru o lungă perioadă de timp a fost subestimată, și totuși am dat seama cum funcționează și de ce este cool. Astăzi, din ce în ce mai mulți dezvoltatori de front-end preferă să folosească un bloc inline în loc să plutească, atunci când au o astfel de oportunitate.

Principalul plus al blocului inline este că nu trebuie să curățăm flotoarele și nu ne confruntăm cu alte probleme care pot apărea din cauza elementelor plutitoare prin flotoare. Pur și simplu setarea proprietății elementului de afișare la valoarea blocului inline produce un hibrid al elementului de linie și al blocului. Ele pot avea o dimensiune, indentare, dar lățimea lor, în mod implicit, depinde de conținut, mai degrabă decât de a ocupa întreaga lățime a elementului părinte. Deci ele sunt plasate orizontal, nu vertical.

Puteți întreba: "Care este atunci problema?". Problema este că acestea sunt pe jumătate, ceea ce înseamnă că au o compensare între ele cu dimensiunea egală cu spațiul. Cu o dimensiune standard de 16 pixeli, este de 4 pixeli. În majoritatea cazurilor, mărimea indentării poate fi calculată ca 25% din dimensiunea fontului. Oricum, acest lucru poate interfera cu aranjamentul obișnuit al elementelor. De exemplu, luați un container de dimensiune de 600px cu trei elemente înăuntru, dimensiunea căreia este de 200px și specificată de afișare: proprietatea inline-block. Dacă nu eliminați indentarea, atunci nu vom mai putea să o plasați într-o singură linie (200 * 3 + 4 * 2 = 608).

Există mai multe modalități de a elimina diferența care nu este necesară pentru noi, fiecare cu propriile plusuri și minusuri. Pentru a fi sincer, nu există încă o soluție perfectă. Să aruncăm o privire la toate la rândul său!

Nivel de marcare: Eliminați spațiile

Pentru toate testele noastre, folosim următorul marcaj.

Așa cum am spus mai devreme, copiii nu vor fi în aceeași linie, deoarece există un caracter spațial suplimentar între fiecare dintre ele (în cazul nostru, o ruptură de linie și 4 spații). Prima modalitate de a rezolva problema este să eliminați complet spațiile.

Funcționează cu adevărat, dar nu este convenabil să citim codul nostru. Deși, putem, reorganizăm puțin elementele noastre, care ar păstra lizibilitatea:

Și dacă e foarte cool, poți să o faci așa:

Da - funcționează! Desigur, nu recomand această abordare, deoarece nu este intuitivă și face codul urât. Să încercăm altceva.

Da, este mult mai bine! Codul este citit și funcționează. Da, metoda nu pare a fi familiarizată la prima vedere, dar nu este atât de greu să te obișnuiești cu ea. Eu folosesc această metodă atunci când am nevoie pentru a elimina spațiile între elementele cu bloc inline.

Desigur, cineva va spune că aceasta nu este o soluție ideală, deoarece funcționează pe marginea marcajului, iar problema ar trebui rezolvată la nivelul CSS. Într-adevăr. Cei mai mulți dintre noi folosesc de fapt soluții css.

Nivel CSS: distanța dintre caractere

Proprietatea de spațiere a literelor este utilizată pentru a specifica indentarea între caractere. Ideea este de a seta indentarea astfel încât să nu alunge spațiul dintre elementele noastre, atunci trebuie să resetați spațierea literelor pentru elementele copilului, astfel încât textul din ele să pară normal.

Nivelul css: marja negativă

O altă abordare a rezolvării problemei este foarte asemănătoare cu cea anterioară, dar cu utilizarea unei linii negative. Principalul său dezavantaj este că nu funcționează în IE 6/7. În plus, trebuie să eliminăm indentarea de la primul element, încât să fie chiar în interiorul containerului nostru.

Dacă nu aveți nevoie de suport IE 6/7, cred că aceasta este o soluție destul de bună.

Css: font-size

În fine, puteți seta dimensiunea fontului blocului părinte la 0, ceea ce ar face ca spațiul să fie egal cu 0px și apoi să restabilească dimensiunea fontului pentru copii.

Această soluție are câteva dintre problemele și limitările sale:

Nu puteți restaura fontul pentru copii utilizând em ca dimensiunea fontului
Spațiile nu sunt șterse pe dispozitive cu Android înainte de Jellybean
Textul folosind @ font-face poate pierde anti-aliasing în Safari 5
Unele browsere ignoră dimensiunea fontului: 0. De exemplu, versiunea chineză Chrome, în acest caz dimensiunea fontului este resetată la 12px

Înțelegerea poziționării absolute.

Poziționarea elementelor este un proces dificil și întotdeauna a fost. Poziționarea, începători, este dată cu mare dificultate. De multe ori (nu) folosesc proprietatea de poziție. Această proprietate determină modul în care elementul poate fi mutat utilizând compensări (sus, dreapta, jos și stânga). Și ia următoarele valori:

static - în mod prestabilit, offseturile nu funcționează
relativ - deplasările deplasează stratul vizual, dar nu elementul însuși
deplasările absolute - deplasează elementul în context (primul nu este un element static)
compensările fixe poziționează elementul în interiorul ferestrei de vizualizare și nu contează unde se află în document

Probleme apar atunci când se utilizează poziția: absolută. Sigur că le-ați întâlnit deja: ați definit un element cu poziționare absolută, deoarece doriți să fie în colțul din dreapta sus al părintelui dvs. (de exemplu, închideți butonul în fereastra modală).

... și apare în colțul din dreapta sus al documentului. Ai un gând "Ce naiba?". De fapt, acesta este un comportament normal al browserului. Cuvântul cheie aici este contextul.

Codul de mai sus spune simplu: "Vreau ca elementul meu să fie poziționat în colțul din dreapta sus al contextului". Deci, care este contextul? Acesta este primul element cu proprietatea pozitiei care nu este egal cu statica. Acesta poate fi în mod direct elementul părinte sau părintele părintelui sau părintele părintelui părintelui. Și astfel la primul element cu poziție! = Static.

Acest concept este adesea dificil pentru începători să înțeleagă, dar când îl înțelegeți, acesta deschide oportunități vaste pentru a lucra cu elemente absolut poziționate.

Un mic demo care ilustrează cele de mai sus. Doi părinți, fiecare cu un element de copil poziționat în întregime cu poziția offset: 0 și dreapta: 0. În partea stângă, părintele corect cu poziția: relativă, în partea dreaptă este incorectă cu poziția: statică.

Sfârșitul primei părți.

Articole similare

Pagina anterioară

Pagina următoare