Share
Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.
Bună. Numele meu este Cory. Am un pic de obsesie. Am fost dependent de sistemele de rețea de ani de zile. De fapt, am ajutat la o popularizare numită Jeet. Întotdeauna am iubit matematica implicată în a distanța lucrurile în mod corespunzător.
Cred că toți suntem de acord că rețelele fixe au străbătut drumul dinozaurilor în favoarea rețelelor fluide, dar au existat întotdeauna lucruri care mă deranjează despre grilele fluide. De exemplu, nu există nici o modalitate de a avea un jgheab pe partea de sus și de jos care să aibă aceeași dimensiune ca un jgheab la stânga și la dreapta. Serios, încercați.
Și nu există nici o modalitate de a cuibunde pe termen nedefinit, fără a trece un fel de context, împreună cu spațiul tău. De exemplu, în Jeet, trebuie să tastați coloană (1/3 1/2) unde 1/2 este dimensiunea elementului care conține. Acest lucru devine destul de păros atunci când ați imbricat de trei sau patru ori și aveți declarații care arătau coloană (1/4 1/3 1/2 1/2). Yuck. Nu este vorba doar de Jeet, fiecărui sistem de grid preprocesor are această problemă.
Și Bootstrap? Nu mă face să încep pe cât de multe elemente suplimentare ai nevoie în marcajul tău doar pentru a-ți face grila de lucru - este o eroare predispusă dacă nu altceva. Sau faptul că aveți nevoie de mai multe elemente în marcarea dvs. dacă doriți să setați culori de fundal pe elemente. Iată un exemplu al acelei mici probleme sub forma unei galerii.
Argh! Chiar și Flexbox nu pare să ofere nimic altceva decât o modalitate convenabilă de a centra vertical lucrurile.
După acel turneu de vânt ce este în neregulă cu grilele de astăzi, ce ar trebui să facă un obsesor de rețea?
Putem folosi calc () în CSS-ul nostru, deci ce face?
"Cu calc (), puteți efectua calcule pentru a determina valorile proprietății CSS." - MDN
Nu numai asta, dar putem combina unități cu calc! Asta inseamna ca daca dorim ca o retea sa aiba patru coloane pe rand cu un jgheab de 20px intre ele, putem scrie o combinatie de valori procentuale si pixeli ca lățime: calc (25% - 20px). Cât de fantastic este asta?
Iată câteva imagini cu pisoi în șapte pisoi într-o cutie secțiune:
Apoi aplicăm câteva imagini stilului:
img float: left; lățime: calc (25% - 20px); margine: 10 pixeli;
Acest lucru vă asigură că fiecare imagine este exact 25% lățimea părintelui său, minus 20px din care permite jgheabul nostru stânga și dreapta. O margine de 10px în jurul valorii de atunci pune imaginea perfect centrat în "coloana".
Patru coloane de pisoi Observați cum distanțele de pe partea superioară și inferioară sunt la fel ca distanțele din stânga și din dreapta? Frumos.
Să aruncăm o privire mai mult pentru aceia dintre noi care ar arăta mai degrabă calculul diferit: lățime: calc (100% * 1/4 - 20px);
Din nou, acest lucru ne oferă patru coloane perfecte cu jgheab de 20px. De asemenea, putem utiliza interogările media pentru a modifica numărul de coloane în funcție de lățimea ferestrei de vizualizare:
img float: left; margine: 10 pixeli; lățime: calc (100% * 1/4 - 20px); @media (max-lățime: 900px) img width: calc (100% * 1/3 - 20px); @media (max-lățime: 600px) img width: calc (100% * 1/2 - 20px); @media (max-width: 400px) img width: calc (100% - 20px);
Ani de obsesie complet șterse de această regulă frumoasă mică CSS. Sisteme de reședință. Bună ziua.
Nu ar fi corect să încheiem acest tutorial rapid fără să vă informăm unde și când puteți folosi calc (). Suspecții obișnuiți se joacă din capcane (IE9 este aproape acolo, dar ignoră calc () cand afișare: tabel este folosit). Cu toate acestea, căutând în față acest lucru este un instrument CSS foarte puternic.
Consultați http://caniuse.com/#feat=calc pentru mai multe detalii.
Accentsconagua
