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

Использование функции calc() 

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

Например, у нас есть блок с тремя вложенными блоками, как показано ниже:

<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>

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

.wrapper .col {
    width: calc(100% / 3);
    padding: 0 10px;
}

Математическое действие calc(100% / 3); разделяет 100% ширины родительского блока на три, и в браузере это выглядит, как три блока равной ширины:

Посмотрите по ссылке ниже, как это работает.

Демонстрация работы – Скачать исходный код 

Также Kurt Maine показал, что с помощью функции calc() очень удобно создавать адаптивную верстку.

Несколько замечаний 

При использовании функции calc() стоит обратить внимание на следующие особенности:

• Вычисления проводятся слева направо.
• Сначала производятся умножение и деление, и действия в скобках.
• Приставки производителей -moz- и -webkit- нужны для старых версий браузров Firefox и Chrome.
• Для вычислений можно использовать разные единицы измерения, например: calc(50% – 10px).
• Знаки плюс и минус должны быть отделены пробелами, например, функция calc(100% -5px) вернет ошибку, так как она переводится как процент за которым следует отрицательное значение. Но пробелы не нужны для знаков умножения * и деления /.

Заключение 

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

• Документация на функцию calc()  – W3.org
• Жемчужины CSS3: функция calc() – Site Point
• Поддержка браузерами функции calc() – caniuse.com

Автор урока Thoriq Firdaus

Смотрите также: