😎 » CSS3 » calc() - Функция калькулятора
738 0  

calc() - Функция калькулятора

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

Выражение может быть любым простым выражением, объединяющим следующие операторы с использованием стандартных правил

приоритета операторов:

+  Плюсовать.
-  Вычитать
* Умножать
/  Делить.


bully! Один из аргументов и крайний правый долженбыть <числом>.

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


Простое использования функции Калькулятора:

<style>
width: calc( 50% - 25px );
width: calc(100% - 200px - 15px);
</style>

Использование переменных в calc() калькуляторе:

<style>
$img_height: 225px;
$img_width: 200px;
$img_padding: 15px;

background-position: 
    calc(100vw - #{$img_width} - #{$img_padding})
    calc(100vh - #{$img_height} - #{$img_padding});
  background-repeat: no-repeat;
  margin: 0;
}
</style>




Пример calc() для создания сетки:




 
 Chrome  Edge  Firefox  Internet  Opera  Safari
26 Yes 16 9 15 7
 
 Android  Chrome  Edge  Firefox  Opera  Safari  Samsung
? 28 Yes 16 21 7 Yes

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023