CSS Calc Playground
Δοκιμάστε και προεπισκοπήστε CSS calc() εκφράσεις σε πραγματικό χρόνο. Πειραματιστείτε με μικτές μονάδες όπως px, %, rem, vw. Δείτε το υπολογισμένο αποτέλεσμα ζωντανά. Αντιγράψτε κώδικα CSS. Δωρεάν online εργαλείο.
Αναφορά
Τι είναι το CSS calc();
Η συνάρτηση CSS calc() σας επιτρέπει να εκτελείτε υπολογισμούς κατά τον καθορισμό τιμών ιδιοτήτων CSS. Είναι ιδιαίτερα χρήσιμη για τη μίξη διαφορετικών μονάδων, όπως ποσοστά και pixels.
Υποστηριζόμενες μονάδες
Μπορείτε να αναμίξετε οποιεσδήποτε μονάδες μήκους CSS μέσα στο calc(): px, %, em, rem, vw, vh, vmin, vmax και άλλα. Οι τελεστές +, -, *, / υποστηρίζονται.
Συνήθη μοτίβα
calc(100% - 2rem) — πλήρες πλάτος μείον σταθερό padding. calc(100vh - 80px) — ύψος viewport μείον header. calc(50% + 1rem) — μισό πλάτος συν μετατόπιση. calc(100% / 3) — ένα τρίτο του container.
Απόρρητο
Όλη η δοκιμή calc() εκτελείται 100% στον browser σας. Κανένα δεδομένο δεν αποστέλλεται σε κανέναν server.