This is the 15th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Content too much, in order not to let you tired, divided into several to write, is bound to learn so CSS functions

Creation is not easy, click like bai!

preface

There are about 80 functions in CSS, but how many do we know? Today we will first introduce the mathematical functions, the mathematical functions are roughly:

  1. Basic arithmetic: calc()
  2. Compare functions: min(), Max (), and clamp()
  3. Step value functions: round(), mod() and rem()
  4. Trig functions: sine (), cosine (), tan(), asin(), acos(), atan(), and atan2()
  5. Exponential functions: POw (), SQRT (), hypot(), log(), exp()
  6. Symbol correlation functions: abs(), sign()

In addition to these functions, there are constants to remember:

E, PI, infinity, -Infinity, NaN

constant

  1. E is the base of the natural log, which is approximately 2.7182818284590452354
  2. PI is the ratio of the circumference of a circle to its diameter, approximately equal to 3.1415926535897932.
  3. Infinity is infinity. The value is + infinity
  4. -infinity represents infinitesimal and has the value − infinity
  5. Is NaN NaN values

Basic arithmetic – Calc

Calc, short for calculate, dynamically calculates length values.

It allows basic arithmetic operations, +), subtraction (-), multiplication (*), division (/), and parentheses to be performed. Note that there should be Spaces between operators and arguments

It also supports text lengths, such as 1px,2em, as well as other mathematical functions or other expressions, such as attr(), whose results are valid parameter types (such as).

The standard mathematical precedence rules for operators apply: Calc (2 + 3 * 4) equals 14, not 20.

Parentheses can be used to manipulate priority: calc((2 + 3) * 4) is changed to equal 20. This is calc(calc(2 + 3) * 4).

For example,

  div {
    float: left;
    border: solid 1px;
    width: calc(100% / 3 - 2 * 1em - 2 * 1px);
    height:100px;
  }
Copy the code

Let’s figure out how the width and height are calculated.

102 = 100 + top and bottom border

429.32 about + 2 = 1384/3-32 – border

Comparison function -min()

The min() CSS method allows you to select a minimum value from the comma-delimited expression as the CSS property value. The min() method can be used on any of the following properties,,,,,, or. Along with basic arithmetic operations, (+), subtraction (-), multiplication (*), division (/), and parentheses.

It also supports text lengths, such as 1px,2em, as well as other mathematical functions or other expressions, such as calc(), whose results are valid parameter types (such as).

Min () is used to limit the maximum value of an element, similar to max-width/height.

width: min(5px * 10, 1em); width: min(calc(5px * 10), 1em); Width: min (5 px * 10, var (width), 20 em, 10 px,...) ;Copy the code

For example,

div {
    float: left;
    border: solid 1px;
    width: min(100px,10em,10vw);
    height:100px;
 }
Copy the code

On the Iphone, the final element width is just 39.53,

Let’s do the math:

First, min(100px,10em,10vw) is converted to the same unit as min(100px, 160px,37.5px).

The minimum value is 37.5px,

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

With a window width of 1384px: the final element width is only 102px.

Comparison function – Max ()

The min() CSS method allows you to select a minimum value from the comma-delimited expression as the CSS property value. The min() method can be used on any of the following properties,,,,,, or. Along with basic arithmetic operations, (+), subtraction (-), multiplication (*), division (/), and parentheses.

It also supports text lengths, such as 1px,2em, as well as other mathematical functions or other expressions, such as calc(), whose results are valid parameter types (such as).

Min () is used to limit the maximum value of an element, similar to max-width/height.

width: min(5px * 10, 1em); width: min(calc(5px * 10), 1em); Width: min (5 px * 10, var (width), 20 em, 10 px,...) ;Copy the code

For example,

div {
    float: left;
    border: solid 1px;
    width: min(100px,10em,10vw);
    height:100px;
 }
Copy the code

With a window width of 1384px: the final element width is only 162px.

Let’s do the math:

First, Max (100px,10em,10vw) is converted to the same unit as Max (100px, 160px,138.4px),

= “maximum is 160px,

= > < span style = “border-width: 160px; border-width: 163px; border-width: 163px; border-width: 163px;

The minimum width is 160.

On the Iphone, the final element is also 162px wide,

Comparison function -clamp()

Clamp number has three calculations – minimum, intermediate, and maximum =clamp(min, val, Max)

Returns the result

It’s kind of like the squeeze theorem. Read the comments carefully

If (min<val&& val< Max) {return val} if (val<min) {// clamp(val,min, Max); Return min} if (val> Max) {return Max}Copy the code

For example,

The window width is 1400px.

 div {
        float: left;
        border: solid 1px;
        width: clamp(100px,10em,10vw);
        height:100px;
      }
Copy the code

Let’s do the math:

Clamp (100px,10em,10vw) is equivalent to clamp(100px,160px,140px)

The final result is 140px

Element width: 140px+ two border=142