Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 11.11.2024)
710660
солдат
369
самолетов
329
вертолетов
9253
танков
18766
ББМ
20314
артиллерия
996
ПВО
1245
РСЗО
28802
машин
28
корабли и катера
Ознакомление с функцией calc() в CSS
Опубликовано Обновлено: 23.01.2019

Ознакомление с функцией calc() в CSS

 

 

Функция calc() в CSS – это простой способ выполнить простые математические действия прямо в CSS стилях без использования, например, языка программирования PHP. Функция умеет работать с четырьмя простыми математическими операторами: сложение (+), вычитание (), умножение (*) и деление (/). С помощью функции calc() вы можете рассчитать значения свойств CSS прямо во время их определения.

 

 

Пример синтаксиса функции calc()

/* свойство: calc(математическое действие); */
width: calc(100% - 35px);

 

Математическое действие, которое можно выполнить для выражения, может принимать следующие формы:

  • + (сложение). Пример: width: calc(25px + 75px);
  • - (вычитание). Пример: padding-top: calc(50px - 7%);
  • * (умножение). Пример: line-height: calc(20% * 2);
  • / (деление). Пример: margin: calc(35% / 2);

 

 

Замечания по использованию функции calc()

  • Знаки плюс и минус должны быть отделены от значений пробелами с двух сторон. Выражение calc(100% -35px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (неверное выражение), в то время как выражение calc(100% - 35px) – будет интерпретировано как вычитание из процентов определенное количество пикселей (т.е., это будет правильное выражение).
  • Операторы * и / не требуют отделения от операндов пробелами, но это не запрещено и даже приветствуется для лучшей читаемости
  • Вы можете использовать разные единицы измерения для каждого из операндов. Чтобы указать желаемый порядок вычисления, вы можете использовать скобки.
  • Если значение не может быть вычислено, оно игнорируется.
  • Деление на ноль выдаст ошибку при парсинге HTML.

 

 

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

Функция calc() становится крайне полезной, когда одно из значений является относительной единицей (например, %), а другое – фиксированной. Это свойство очень часто применяется в адаптивном веб-дизайне.

 

 

Пример использования: позиционирование объекта с помощью отступа

В примере ниже мы позиционируем блок на всю ширину окна, с отступами по краям в 40px при любом размере девайса.

.block {
 position: absolute;
 width: 85%; /* для браузеров, которые не поддерживают calc() */
 width: calc(100% - 50px);
 padding: 15px;
 border: 1px #000 solid;
}

 

 

 

Поддержка функции calc() браузерами

Поддержка на удивление довольно хорошая.

  • Firefox до версии 16.0 поддерживает значение -moz-calc.
  • Chrome до версии 26.0 поддерживает значение -webkit-calc.
  • Safari с версии 6.0 поддерживает значение -webkit-calc.
  • На мобильных устройствах Android только с 67+, iOS только на 6.0+, а Opera Mini пока не поддерживает эту функцию.

 

 

 

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

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


Быстрый доступ по сайту SebWeo
Угости меня кофе