html.okpython.net
Основы создания сайтов
CSS :: Функция calc()
Функция calc() (от англ. calculate – вычислять) используется для расчета вычисляемых значений css-свойств во время их определения.
Синтаксис
<css-свойство>: calc(<выражение>)
Значения
В качестве значения функция calc() принимает математическое выражение, в котором в различных комбинациях могут использоваться единицы измерения длины, времени, угла, а также числа. При этом допустимо использование скобок и следующих операторов (перечисляются в порядке их приоритета):
- + – сложение (знак плюса должен отбиваться пробелами с обеих сторон), например, width: calc(70% + 20px);
- - – вычитание (знак минуса должен отбиваться пробелами с обеих сторон), например, height: calc(100vw - 20em);
- * – умножение (один из сомножителей должен быть числом), например, margin: calc(1em*1.3);
- / – деление (делитель должен быть числом, отличным от нуля), например, padding: calc(100%/50).
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-values-3/#calc-notation
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/calc
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ position: absolute; left: calc(3% + 3em); top: calc(10px + 2em); width: calc(100vw*0.7 - 3em); height: calc((100vw - 3em)/3 + 20px); padding: calc(3em/2); border: 1px solid blue; background-color: rgb(calc(380/2),calc(380/2),calc(380/2)); } </style> </head> <body> <p> position: absolute;<br> left: calc(3% + 3em);<br> top: calc(10px + 2em);<br> width: calc(100vw*0.7 - 3em);<br> height: calc((100vw - 3em)/3 + 20px);<br> padding: calc(3em/2);<br> border: 1px solid blue;<br> background-color: rgb(calc(380/2),calc(380/2),calc(380/2)); </p> </body> </html>
Пример №1