English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство CSS

CSS @ правила (RULES)

Полный список свойств CSS

Функция calc() CSS

Функция calc() CSS позволяет выполнять некоторые вычисления при определении значений свойств CSS. Она может использоваться в следующих случаях: <length>, <frequency>, <angle>, <time>, <number> или <integer>.

CSS функция

Онлайн пример

Использование функции calc() для вычисления ширины элемента <div>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник(oldtoolbag.com)</title>　
<style>
#div1 {
　　　　position: absolute;
　　　　left: 50px;
　　　　width: calc(100% - 100px);
　　　　border: 1px solid black;
　　　　background-color: yellow;
　　　　padding: 5px;
　　　　text-align: center;
}
</style>
</head>
<body>
<p>Создайте div, перекрывающий экран, с отступом 50px с обеих сторон:</p>
<div id="div1">некоторый текст...</div>
</body>
</html>
Проверьте, посмотрите ›/›

Определение и использование

Функция calc() используется для динамического вычисления значений длины.

  • Следует отметить, что перед оператором и после него необходимо оставить один пробел, например:width: calc(100% - 10px);

  • Любой длину можно вычислить с помощью функции calc();

  • Функция calc() поддерживает операции "+", "-", "*", "/";

  • Функция calc() использует стандартные правила приоритета математических операций;

Поддерживаемая версия: CSS3

Совместимость браузеров

Числа в таблице показывают первую версию браузера, поддерживающую эту функцию.

"webkit" или "moz" или "o" указанные числа — это префиксы первой версии браузера, поддерживающего эту функцию.

Функция




calc()26.0
19.0 -webkit-		9.016.0
4.0 -moz-		7.0
6.0 -webkit-		15.0

Грамматика CSS

calc(expression)
ЗначениеОписание
expressionОбязателен, математическое выражение, результат которого будет использоваться в качестве значения.
Эта функция calc() принимает выражение в качестве аргумента и использует результат этого выражения в качестве значения. Это выражение может быть любой комбинацией таких операторов, используя простые выражения с правилами обработки стандартных операторов. Пример: width: calc(100% - 80px);

CSS функция

Правило @charset CSSФункции CSS