CSS calc()

Для того чтобы сделать хорошую разметку CSS, в первую очередь нужно указывать размеры для элементов макета. Вам понадобится функция, в которой всегда можно указать размеры. Например, было бы неплохо иметь возможность развернуть на 50% от всей площади плюс фиксированная сумма, скажем, 10 пикселей.

Для этого существует функция calc(), которую можно использовать для любой длины, изображения, рассчитать границы, поля, отступы, шрифты, и залить цветом, и это не всё, функция CSS calc() имеет множество применений в стилях. На этой странице применения функции calc(), которые могут пригодится чаще всего.

Макет CSS становиться умнее с calc()

Функция calc() для разметки даёт нам две основные возможности:

  1. Совместить проценты и фиксированные размеры.
  2. Совместить значение размеров.
к меню ↑

Совместить проценты и фиксированные размеры

Допустим, у нас есть область и мы хотим выделить элементу 50% от всей области и отнять 100px, тогда мы напишем код таким образом:

#foo {
  width: calc(50% - 100px);
}
<div id="foo">Всегда на 100 пикселей меньше, чем половина доступной области</div>
Всегда на 100 пикселей меньше, чем половина доступной области.

Теперь содержание правого края будет на 100px меньше слева от центра области. Таким образом можно комбинировать различные типы значений и обрабатывать размеры макета для разных устройств с гораздо большим контролем.

к меню ↑

Совместить значение размеров

Еще одна возможность функции calc(), совместить единицы значения размеров. Например, вы можете смешать единицы em и px относительно текущего размера шрифта.

#bar {
  height: calc(10em + 3px);
}
сalc()
к меню ↑

Математические операции

Простая математическая операция calc(100% / 3), делит основною ширину на три одинаковые части.

А
Б
В

CSS

.wrapper {
	width: 700px;
	margin: 50px auto 0;
	height: 500px;
}
.col {
	width: -webkit-calc(100% / 3);
	width: -moz-calc(100% / 3);
	width: calc(100% / 3);

	float: left;
	height: 100%;
	text-align: center;
	font-size: 50px;
	color: #fff;
	line-height: 300%;
	font-weight: bold;
}
.col.one {
	background-color: #3b3140;
}
.col.two {
	background-color: #bfb8a3;
}
.col.three {
	background-color: #f2e0c9;
}

Попробуйте. В сalc() вы можете использовать знаки +, -, складывать, вычитать, умножать и делить значения, что даёт много возможностей в CSS. При этом не забывая о префиксах CSS.

к меню ↑

Поддержка

Смотрите резиновый трёхколоночный макет CSS calc.