This is the 11th original article of Big Ice 2021, work hard with big Ice in front field!! 💪

Writing in the front

Today, I used the calc() function of CSS3 in less. I have not used it for a long time. First, I missed the space before and after the operator. Then after compiling, the UI said that the interface display was wrong. When I looked carefully, it seemed that something was wrong.

The CSS using the calc() function looks like this:

width: calc(100% - 10px);
Copy the code

The end-of-compile code looks like this:

width:90%;
Copy the code

I was like this:

I checked the data and found out:

In less parsing, calc operations are evaluated by themselves regardless of the unit: for example, “width:calc(50%-5em)” is resolved to “width:calc(45%)”.

Width :calc(~” 50%-5em “)

I don’t know enough, so let’s go back to calc(). After reading more, I don’t panic when I encounter problems. Even if I don’t see anything, I can comfort myself by reviewing the past and knowing something new

Calc the usage ()

  • Operators need to be preceded by a space, for example:width: calc(100% - 10px);Instead of ‘width: calc(100%-10px).
  • Any length value can be evaluated using the calc() function. For example, %, VW, VH, PX, vmin, vmax, EM, REM and other units;
  • The calc() function supports “+”, “-“, “*”, “/”.
  • The calc() function uses standard mathematical precedence rules.
  • The calc() function supports nesting, for examplecalc( 100% / calc(2em * 5) )

Calc () usage scenario

Make DOM elements more flexible in response to viewport changes. For example, if the width of a given element is the height of the viewport minus an absolute value, it will change as the viewport changes. The following code:

width: calc(100vw - 50px);
height: calc(100vh - 50px);
Copy the code

Width :33.3333%; And width:calc(100/3); It’s also easier to modify.

Absolute positioning center: implementation equivalent to Maraging-top: -50px; margin-left: -50px; The effect. For example, if you need to set the margin attribute, you can avoid style conflicts.

width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
Copy the code

Write in the back

Calc () function this part of the knowledge is not much, as long as you understand how to use, pay attention to avoid the pit will not have a problem.

This is the eighth article in the Once You Read Series, which aims to present some common concepts or methods in an easy-to-understand way. You are welcome to click on other articles to discuss and learn:

  • Do you promise to use Symbol after reading the series?
  • “Read to understand series” talk about the principle and implementation of data burying point
  • Has Ajax single-handedly created the entire front-end ecosystem?
  • Is permission management complex in The Wikis project?
  • You know what? Oh, my God! It’s so easy to figure out throttling and anti-shaking
  • 15 ways to play with strings
  • The differences and usage between the string interception methods substr(), slice(), and substring()

Original is not easy, if there are mistakes, welcome to correct.

If it helps you, please give big ice quietly praise attention, your praise attention is my motivation to write down.

Let’s make progress on the front end together ~🤭