Как работает функция calc()

Как работает функция calc()

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

Почему calc()?

Если вы используете препроцессоры типа SASS, пример сверху вам должен быть знаком.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Функция calc() лучше по двум причинам. Во-первых, можно совмещать разные единицы измерения. Можно комбинировать относительные единицы, такие как проценты и vw, с абсолютными единицами типа пикселей. Например, можно написать выражение, в котором из процентного значения будет вычитаться значение в пикселях.

В примере выше элемент .foo всегда будет на 50px уже 100% ширины его родителя.

Во-вторых, в calc() вычисленное значение является самим выражением, а не конечным значение выражения. При работе с математическими выражениями в CSS препроцессорах значение, передаваемое в браузер, является конечным значением выражения.

А с функцией calc() значение, которое парсится браузером, это само выражение calc().

Это значит, что значения в браузере могут быть более динамичными, они могут адаптироваться под изменения вьюпорта. Можно создать элемент с высотой вьюпорта минус абсолютное значение, и он будет адаптироваться под изменения вьюпорта.

Использование calc()

Функцию calc() можно использовать для сложения, вычитания, умножения и деления числовых значений свойств. Ее можно использовать с типами данных length, frequency, angle, time, number и integer.

Пара примеров:

Вложенность функций calc()

Функцию calc() можно вкладывать. Однако внутренние функции будут расцениваться, как просто выражения в скобках. Разберем для примера выражение ниже:

Вычисленное значение этой функции будет следующим:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Создание фолбека

Функция calc() довольно хорошо поддерживается.

Если браузер не поддерживает значение в виде функции calc(), игнорируется пара свойство-значение. То есть для браузеров без поддержки можно с легкостью задать фолбек в виде статического значения.

Когда можно использовать calc()?

Функция calc() полезна во многих ситуациях.

Пример 1 – центрирование элементов

Функция calc() дает нам еще один способ решения старой-старой проблемы с центрированием элементов по горизонтали и вертикали внутри контейнера. Если нам известны размеры дочерних элементов, обычно можно использовать отрицательные margin’ы для сдвига элементов на половину высоты или ширины, вот так:

С помощью calc() центрировать элемент можно всего лишь с помощью свойств top и left.

Если подключить flexbox, такие методы нам не понадобятся. Однако в случаях, когда нельзя использовать flexbox (например, если элемент нужно абсолютно или фиксировано спозиционировать), этот метод будет очень полезен.

Пример 2 – создание базового размера сетки

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

Теперь 1rem будет равен 1/30 ширины вьюпорта. Любой текст на странице будет автоматически изменяться вместе с вьюпортом. На экране всегда будет одно и то же количество текста независимо от размера вьюпорта.

Если нетекстовым элементам на странице задать размеры в rem, они будут вести себя так же. Элемент шириной 1rem всегда будет занимать 1/30 ширины вьюпорта.

Пример 3 – ясность

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

Но намного понятнее будет, если записать код в такой форме:

С calc() можно делать еще очень много чего, например, можно создать систему сеток. Определенно, это одна из полезнейших функций в CSS.

Источник: https://bitsofco.de/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree