Cum se utilizează calc () în css

Proprietatea CSS calc () ne permite să efectuăm calcule simple în foile de stil.

Iată un set de reguli care demonstrează utilizarea proprietății calc ():

recipient # 123;






înălțime. Calc # 40; 100% - 50px # 41; ;
lățime. Calc # 40; 100% - 40px # 41; ;
# 125;

Putem efectua calcule aritmetice numai cu calc ():

Proprietatea calc () funcționează cu mai multe tipuri de dimensiuni în CSS:

Proprietatea calc () nu poate funcționa cu valorile de culoare CSS.

Calc () calculele vor fi cele mai utile atunci când valorile calculate sunt un amestec de unități relative și fixe.

În primul rând, hai să vorbim despre cazul în care nu trebuie să folosim proprietatea calc ().

/ * Nu face acest lucru * /
div # 123;
lățime. Calc # 40; 600px / 2 # 41; ;
# 125;

În regula de mai sus, efectuăm un calcul pe care îl putem face cu ușurință. Prin urmare, pentru CSS noastră a fost mai ușor de citit și pentru a evita calcule inutile browser-ul, care poate încetini pagina noastră de web, ar fi mai bine dacă ne vom obține un calculator real, și se calculează valorile dorite:

div # 123;
lățime. 300px;
# 125;

Unde se utilizează calc ()

Proprietatea calc () este extrem de utilă atunci când una dintre valori este o unitate relativă, iar cealaltă este una fixă. Această abilitate de a combina diferitele unități de măsură este utilă în mod special în designul web adaptiv.

Iată un exemplu cu un container care va avea întotdeauna linii de stânga și dreapta de 20px, indiferent de dimensiunea ecranului:

recipient # 123;
marjă. 0 auto;
lățime. Calc # 40; 100% - 40px # 41; ;
# 125;

În acest caz, putem asigura citirea confortabilă a conținutului nostru, indiferent de dispozitivul utilizat. Și acest mod de centrare a unui container "din cauciuc" necesită doar CSS minimal și HTML. Alte metode de proiectare pentru proiectarea adaptivă pentru a obține același rezultat vor necesita mai multe coduri și pot implica atât câmpuri negative, interogări media, cât și containere HTML suplimentare.

Specificații pentru calc () este descris în W3C Valorile CSS și unitățile Modulul 3. Rețineți că la proprietate moment de calc () este una dintre cele trei proprietăți CSS evidențiate în specificație ca un grup de risc. Iată ce spune el CR: Următoarele proprietăți sunt la risc, și pot fi eliminate în cursul perioadei CR: calculat (), Comutați între (), attr ().

În prezent, proprietatea calc () este susținută de aproximativ 82% din toate browserele utilizate pe Web, potrivit caniuse.com. Internet Explorer 9 are suport partial pentru calc (). în versiunile mai noi ale browserului există suport complet pentru această funcție.

Articole similare

• Cum se utilizează ulei de lemn de santal cu un beneficiu maxim

• Noțiuni de bază cu css calc ()

• Și dacă îl folosim în mod corect pe concealer - prietenul și ajutorul nostru! opinii

Trimiteți-le prietenilor: