Hogyan kell használni a Calc () a css

Hogyan kell használni a Calc () a css

CSS számított () tulajdonság lehetővé teszi számunkra, hogy végre az egyszerű számítások táblázatok stílusokat.

Itt van egy sor szabályt mutatja, hogyan kell használni a tulajdonságait calc ():

konténer # 123;
magasságot. calc # 40; 100% - 50 képpont # 41; ;
szélessége. calc # 40; 100% - 40px # 41; ;
# 125;

Mi csak aritmetikai számítások számított ():

számított tulajdonság () működik együtt számos típusú mérések CSS:

számított () tulajdonság nem működik a CSS szín értékeket.

Calc () számítás lesz a leghasznosabb, ha a számított értékek keveréke relatív és fix egységek.

Először beszéljünk, ha nem használja a Calc () tulajdonság.

/ * Ne csináld ezt * /
div # 123;
szélessége. calc # 40; 600px / 2 # 41; ;
# 125;

A fenti szabály alól, végezzük a számítást, hogy könnyen csinálni magadnak. Ezért, hogy a CSS volt olvasható, és hogy elkerüljék a felesleges számításokat böngésző, ami lassítja a weboldalt, hogy jobb lenne, ha szerzünk magunknak egy igazi számológép és kiszámítja a kívánt értékeket:

div # 123;
szélessége. 300px;
# 125;

Hol használható Calc ()

számított () tulajdonság rendkívül hasznos lesz, ha a mért értékek egyike relatív egység, és a többi - rögzített. Ez a képesség, hogy összekapcsolják a különböző egységek különösen alkalmasak érzékeny web design.

Itt egy példa a tartály, amely mindig a bal és a jobb margó 20px, függetlenül a képernyő mérete:

konténer # 123;
árrés. 0 auto;
szélessége. calc # 40; 100% - 40px # 41; ;
# 125;

Ebben az esetben tudjuk biztosítani a kényelmes olvashatóság tartalmi, nem számít, milyen eszközt használnak. És ez így központosító a „gumi” konténer csak minimális CSS és HTML. Más módszerek tervezése reagáló web design elérni ugyanazt az eredményt több szükséges kódot, és ahhoz vezethet, hogy olyan dolgok, mint a negatív árrés, a média-lekérdezések és további HTML-konténerek.

Specifikáció Calc () le van írva a W3C CSS értékek és mértékegységek modul 3. Tartsa szem előtt, hogy abban a pillanatban tulajdonát számított () egyike a három CSS tulajdonságok kiemelte a leírásban kockázati csoportba. Itt van, amit mond CR: a következő tulajdonságokkal veszélyben vannak, és el lehet távolítani során CR időszak: számított (), toogle (), attr ().

Jelenleg számított tulajdonság () tartjuk körülbelül 82% -a az összes használt böngésző a webes szerint caniuse.com. Az Internet Explorer 9 részleges támogatása számított (). az újabb verziójú böngésző teljes mértékben támogatja funkciókat.

Kapcsolódó cikkek