html.okpython.net
HTML и CSS для начинающих

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).

Ссылки

Примеры

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