CSS функция calc()css3

CSS функции

Определение и применение

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

Поддержка браузерами

ФункцияChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
calc()css326.0
19.0
-webkit-
16.0
4.0
-moz-
15.07.0
6.0
-webkit-
9.012.0

CSS синтаксис:

calc(математическое выражение);
/* в качестве операндов могут выступать значения length | frequency | angle | time | number | integer */

Значения функции

ЗначениеОписание
expression
(выражение)
Математическое выражение. Результат этого выражения будет использоваться в качестве конечного значения. Является обязательным значением.

Допускается использовать следующие операторы:

  1. + (сложение). Оператор должен разделяться пробелами с обеих сторон.
  2. - (вычитание). Оператор должен разделяться пробелами с обеих сторон.
  3. * (умножение). Оператор не требует пробела между значениями, но рекомендуется их добавлять.
  4. / (деление). Оператор не требует пробела между значениями, но рекомендуется их добавлять. Деление на ноль вызовет ошибку.

Версия CSS

CSS 3

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования функции calc()</title>
<style>
html, body {
height: calc(100% - 8px);
background: #999;
}
.first {
width: 30%;
float: left;
height: 100%;
margin-right: 1em;
background: forestgreen;
}
.second {
width: calc(70% - 1em);
float: right;
height: 100%;
color: white;
background: green;
}
</style>
</head>
<body>
	<div class = "first"></div>
	<div class = "second"></div>
</body>
</html>

В данном примере мы:

Вы можете заметить, что проще в этом примере просто изменить применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов - box-sizingcss3 со значением border-box и не проводить рассчетов. Да это так, но если у вас тысячи страниц сверстаны под модель принятую по умолчанию, то изменяя её это может привести к серьезным проблемам.

Результат примера:

Пример использования функции calc().
Пример использования функции calc().

Рассмотрим пример в котором мы создадим сеточную систему с использованием функции calc().

<!DOCTYPE html>
<html>
<head>
<title>Пример использования функции attr()</title>
<style>
div[class^='column'] {
float: left;
height: calc(100vh - 8px);
}
.column-1-12 {
width: calc(100% / 12);
background: red;
}
.column-2-12 {
width: calc(100% / 12 * 2);
background: green;
}
.column-3-12 {
width: calc(100% / 12 * 3);
background: yellow;
}
.column-4-12 {
width: calc(100% / 12 * 4);
}
.column-5-12 {
width: calc(100% / 12 * 5);
background: blue;
}
.column-6-12 {
width: calc(100% / 12 * 6);
}
.column-7-12 {
width: calc(100% / 12 * 7);
}
.column-8-12 {
width: calc(100% / 12 * 8);
}
.column-9-12 {
width: calc(100% / 12 * 9);
}
.column-10-12 {
width: calc(100% / 12 * 10);
}
.column-11-12 {
width: calc(100% / 12 * 11);
}
.column-12-12 {
width: 100%;
}
</style>
</head>
<body>
	<div class = "column-1-12"></div>
	<div class = "column-2-12"></div>
	<div class = "column-5-12"></div>
	<div class = "column-3-12"></div>
	<div class = "column-1-12"></div>
</body>
</html>

В данном примере мы:

Результат примера:

Сеточная система с использованием функции calc().
Сеточная система с использованием функции calc().
CSS функции