Функция calc()

Справочник:

Функция

Характеристики свойства

В каких браузерах работает?


9.0+	26.0+	15.0+	6.0+	16.0+	-	-

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	-	-	+

Для чего используется?

Функция позволяет высчитать величину любой размерной величины с использованием основных математических операций. Это очень необходимо, когда нужно расчитать отступ из комбинации разных единиц измерений. Функция свободно работает со всеми единицами измерений CSS. В том случае, если функция не может осуществить предложенные операции, то свойство игнорируется.

Как правильно задавать?

свойство: calc(выражение)

Какие могут быть значения?

В качестве значений могут использоваться любые единицы измерения размеров CSS и их комбинации. При определении величины размера могут использоваться 4 основных математических операций:

сложение (+);
вычетание (-);
умножение(*);
деление (/).

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
   ul{
	display:block;
	margin:30px auto;
	width:300px;
   }
   li{
	display:inline-block;
	vertical-align:top;
	width:150px;
	height:105px;
	text-align:center;
	padding-top:45px;
	color:#fff;
	font-size:45px;
	position:absolute;
	top:calc(20% - 40px);
	left:calc(50% - 25px);
   }
   li:only-child{
	border-radius:50%;
	background:#ff7373;
   }
 
  </style>
 </head>
 <body>
  <ul>
	<li>calc()</li>
  </ul>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Размеры