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

Read not in the middle of the night five drum, work is work by fits and starts. After watching feel have harvest, point a like bai!!

Emphasis!!

The functions described in this article are still experimental properties and are not yet supported by browsers. But I believe it will be soon.

If you do not want to understand the study temporarily, suggest a collection, such as browser support to see again!!

preface

There are nearly 102 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()

Here is what I personally call Stepped Value Functions. Officially, it is called: Stepped Value Functions

Step value function -round()

grammar

Round (Strategy, A,B)Copy the code

For negative values:

round(nearest, A, -B) = round(nearest, A, B)

round(up, A, -B) = round(up, A, B)

round(down, A, -B) = round(down, A, B)

round(to-zero, A, -B) = round(to-zero, A, B)

strategy

It looks something like this: Find two multiples x and y, make sure that Bx (lower B) is less than A and By(upper B) is greater than A, and select the corresponding multiples according to the strategy.

For the convenience of calculating the value, here is a quick formula for each calculation.

nearest

The default policy, similar to math.round (), selects the one closer to A in “down B” and “up B”. If it’s a tie, select “Up B.”

round(nearest, A, B) = Math.round(A/Math.abs(B)) * Math.abs(B)
Copy the code

For example:

round(nearest, 4, 3) = 3 

round(nearest, -4, 3) = -3
Copy the code

Instead of using a formula, let’s explain:

For round(nearest, 4, 3), it is very simple. First find out the multiples, and it can be seen that the multiples are 1 and 2 at A glance. Then select 3*1 as the nearest to A according to the strategy, so the result is 3.

For round(nearest, -4, 3), it is easy to find out the multiples first. It can be seen that the multiples are -1 and -2 at a glance, and then select 3*-1 as the closest to -4 according to the strategy, so the result is -3.

You can try it yourself, and if it doesn’t work, just plug it into the formula.

up

Select “up B” similar to math.ceil ()

round( up, A, B) = Math.ceil( A/Math.abs(B)) * Math.abs(B)

Copy the code

down

Equivalent to math.floor () select “down B”

round(down, A, B) = Math.floor(A/Math.abs(B)) * Math.abs(B)
Copy the code

For example:

round(down, 4, 3) = 3 

round(down, -4, 3) =  (-6)
Copy the code

to-zero

Math.trunc() Select the one closer to 0 in ‘down B’ and ‘up B’.

round(to-zero, A, B) = Math.trunc(A/Math.abs(B)) * Math.abs(B)
Copy the code

Step value function -mod()

It’s not mod, it’s the difference between A and the nearest integer multiples of B above or below A. And the difference has to be between 0 and B. So let’s make sure we know what the multiples are.

Note here: poor algorithm

A minus b

AB different sign: A+B

mod(A,B)
Copy the code

For example, 1- is positive

Mod (140px, 90px) returns 50px with a multiple of 1.

Why is it 1 and not 2? If it’s 2, it’s off by 40, which is less than 50, but do you notice that 140- (90*2) returns -40, which is not consistent with the value between 0 and B.

Example 2- is all negative

Mod (-140deg, -90deg) returns the value -50deg with a multiple of 1.

Why is it 1 and not 2? If it’s 2, it’s off by 40, which is less than 50, but do you notice that -140- (-90*2) returns positive 40, which doesn’t fit between 0 and B. Because adding -90deg * 1 to -140deg produces -50deg

Let’s say 3 minus A plus B minus

Mod (140deg, -90deg) returns the value -40deg in a multiple of 2. So this is an easy case to solve for, you just have to find x that makes A plus b times x the most negative

For example, 4 minus A minus B positive

Mod (-140deg, 90deg) returns the value 40deg in a multiple of 2. And this is also an easy case to figure out, just look for x where A plus b times x is the smallest positive value

Step value function – REM ()

Rem functions are very similar to mod functions. Again, it takes two parameters

rem(A,B)
Copy the code

Note here: the poor algorithm is also consistent

A minus b

AB different sign: A+B

If A and B have the same sign, they are the same.

But when AB is different, it is different because the difference of REM is between 0 and (-b),

Let’s say 1 minus A plus B minus

Mod (140deg, -90deg) returns the value 50deg in a multiple of 1. This is a negative B, so it’s going to be between 0 and 90, so the multiple is 1

Let’s say 2 minus A minus B plus

Mod (-140deg, 90deg) returns the value -50deg with a multiple of 1. B is positive here, and you have to get between 0 and -90, so only multiples of 1 are good.

conclusion

Originally, I wanted to end this article with mathematical functions, but these three functions are difficult to understand, so I’ll just write these three functions for you to absorb them better. The next article must finish the series of mathematical functions.