Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Функция calc()

Дата:9.12.15 в 11:36
Справочник: 

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

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

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>

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

calc

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: