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