Към съдържанието

CSS Calc Playground

Тествайте и преглеждайте CSS calc() изрази в реално време. Експериментирайте със смесени единици като px, %, rem, vw. Вижте изчисления резултат на живо. Копирайте CSS кода. Безплатен онлайн инструмент.

320px 2560px
Примери
Преглед
CSS изход
 

Какво е CSS calc()?

CSS функцията calc() ви позволява да извършвате изчисления при определяне на стойности на CSS свойства. Тя е особено полезна за смесване на различни единици, като проценти и пиксели.

Поддържани единици

Можете да смесвате всякакви CSS единици за дължина вътре в calc(): px, %, em, rem, vw, vh, vmin, vmax и други. Операторите +, -, *, / са поддържани.

Често срещани шаблони

calc(100% - 2rem) — пълна ширина минус фиксирано padding. calc(100vh - 80px) — височина на viewport минус header. calc(50% + 1rem) — половин ширина плюс отместване. calc(100% / 3) — една трета от контейнера.

Поверителност

Цялото тестване на calc() работи 100% във вашия браузър. Никакви данни не се изпращат на сървър.