Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

5 марта 2016 | Опубликовано в css | Нет комментариев »

Вы, возможно, знаете, что с помощью препроцессоров 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() можно задавать размеры более гибко, за дополнительной информацией об этой функции можно обратиться к следующим источникам:

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

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




Оставить ответ


+ три = 12

Вставить изображение