Funções de matemática no CSS
O CSS suporta várias funções matemáticas que podem ser usadas para escolher um valor de propriedade fazendo alguns cálculos matemáticos. O uso primário das funções matemáticas é obter os valores mais altos ou mais baixos dos valores passados para a função específica. Símbolos matemáticos como -, +, /e * podem ser aplicados a vários valores para obter um novo valor para essa propriedade. Este post demonstra o uso de funções matemáticas no CSS. Mantendo as coisas específicas, este guia serve os resultados abaixo estatados:
- Como usar a função calc () no CSS
- Como usar a função min () no CSS
- Como usar a função max () no CSS
Funções de matemática no CSS
Esta parte central do guia fornece o trabalho e o uso de várias funções matemáticas no CSS. Cada função de matemática seria descrita em detalhes com a ajuda de um exemplo
Como usar a função calc ()
O calc () é uma função matemática que executa algum cálculo matemático sobre os valores para obter um novo valor da propriedade específica.
calc (expressão)O expressão Na sintaxe acima refere -se à expressão matemática (valores unidos com +, -, * etc).
Exemplo
O código fornecido abaixo pratica a função calc () em um conjunto de valores para obter um novo valor da propriedade específica.
Html
A função calc () é usada para definir a largura
CSS
A função calc () é aplicada na propriedade de largura que adiciona "300px" e "20%" Para obter o novo valor de largura.
Saída
A saída mostra que a largura do parágrafo foi estendida à soma de "300px" e "20%".
Como usar a função min ()
A função min () retorna o valor mínimo e esse valor é usado para essa propriedade CSS específica. A sintaxe a seguir é usada pela função min ()
Min (Val1, Val2, Val3,…)A função Min () compara o Val1, Val2 e Val3 para obter o valor mínimo.
Exemplo
Este exemplo usa a função min () para obter o valor mínimo entre o aprovado.
Html
A função min () é usada para definir a altura/largura
O código HTML acima contém um parágrafo que será usado no CSS para aplicar a função min ().
CSS
O código CSS acima usa a função min () na largura e altura do elemento de parágrafo. Os valores para a largura estão em “Porcentagem (%)” e “polegadas (in)” enquanto que os valores para a altura estão em "PT" e "PX".
Saída
Da saída, observa -se que a função min () definiu a altura para “50pt” e largura para “4 polegadas” como eles eram os valores mínimos.
Como usar a função max ()
O max () compara vários valores e escolhe o valor máximo dos valores de entrada. A sintaxe da função max () é fornecida abaixo:
Max (Val1, Val2, Val3,…)O Val1, Val2 e Val3 se referem aos valores que estão sendo passados para a função max ().
Exemplo
O código a seguir pratica a função de matemática max () no CSS.
Html
A função max () é usada para definir o preenchimento e a opacidade
CSS
No CSS acima, o preenchimento, a opacidade e a largura são usados com a função max (). Depois de comparar os valores, a função max () selecionará o "10pt" para preenchimento, "50%" para opacidade e largura.
Saída
A saída mostra que a função max () escolheu os valores máximos de opacidade, largura e preenchimento.
Conclusão
As funções matemáticas no CSS são usadas para escolher ou gerar um valor para uma propriedade CSS específica. A função calc () executa uma expressão matemática no conjunto de valores e gera um novo valor. Ao contrário disso, as funções min () e max () escolhem os valores mínimo e máximo (dos valores de entrada), respectivamente. Este artigo fornece o uso das funções de matemática no CSS. Essas funções de matemática ajudam a escolher os diferentes valores para diferentes cenários.