Применение функции Calc()
Как уже упоминалось, можно употреблять calc() для определения таких величин, как width, height, margin, padding, font-size, и т.д. Для измерения можно использовать математические действия: сложение, вычитание, деление и умножение.
Например, предположим, что у нас внутри обертки имеется три <div>, как показано внизу.
<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>
При помощи функции calc() можно легко определить эти div в колонки с равной шириной следующим образом.
.wrapper .col {
width: calc(100% / 3);
padding: 0 10px;
}
Следующая математическая операция calc(100% / 3); делит 100% родительской ширины на три, и вот как все это смотрится в браузерах. У трех div получается одинаковая ширина.
Кроме того, Курт Мейн (Kurt Maine) доказал, насколько на самом деле функция calc() удобна для созданияадаптивной разметки.
Обратите внимание на следующее
При употреблении функции calc() стоит обратить внимание на некоторые вещи.
Во-первых, подсчет проводится слева направо.
Деление и умножение, а также математические выражения внутри скобок будут считаться в первую очередь.
В настоящее время calc() не поддерживается в Opera.
Для ранних версий Firefox и Chrome понадобятся префиксы -moz- и-webkit-.
Для операций можно применять различные единицы, например calc(50% – 10px)
Знаки + и – нужно разделять пробелами, например calc(100% -5px) вернет invalid, так как интерпретируется как процент, за которым следует отрицательное значение. Но пробелы не нужны для знаков * и /.
Последнее размышление
Прежде в CSS3 и препроцессоре CSS мы были ограничены фиксированным типом величины. Сегодня с помощью calc() можно более разумно установить величину, а побольше узнать об этой функции можно из нижеприведенных ссылок.