What is the use of css calc()

css calc() is used to dynamically calculate the length value. This function allows us to perform mathematical operations on attribute values, using syntax such as ".foo { width: calc(100px 50px);}", this statement Indicates that the fixed pixel value specifying the width of an element is the sum of multiple values.

Recommended: "css Video Tutorial"

css3's calc() function is used to dynamically calculate the length value.

The calc() function allows us to perform mathematical operations on attribute values. For example, we can use calc() to specify a fixed pixel value for the width of an element as the sum of multiple values.

.foo {  width: calc(100px + 50px);
}

Note:

• It should be noted that a space needs to be reserved before and after the operator, for example: width: calc(100% - 10px);

• Any length value can be calculated using the calc() function;

• The calc() function supports " ", "-", "*", "/" operation;

• The calc() function uses standard mathematical operation priority rules;

Why is calc()

If you have used a css preprocessor, such as SASS, you may have encountered the above example

.foo {
    width: 100px + 50px;
}
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

However, the calc() function provides a better solution. First, we are able to combine different units. In particular, we can mix calculations with absolute units (such as percentages and viewport units) and relative units (such as pixels). For example, we can create an expression that subtracts a pixel value from a percentage.

.foo {    width: calc(100% - 50px);
}

In this example, the .foo element is always 50px smaller than the width of its parent element.

Second, using calc(), the calculated value is the expression itself, not the result of the expression. When doing mathematical operations using the CSS preprocessor, the given value is the result of the expression.

.foo {    width: 100px + 50px;
}.foo {    width: 150px;
}

However, the value of calc() parsed by the browser is the actual calc() expression.

.foo {    width: calc(100% - 50px);
}.foo {    width: calc(100% - 50px);
}

This means that values ​​in the browser can be more flexible and respond to changes in the viewport. We can set a height for the element that is the height of the viewport minus an absolute value, and it will adjust as the viewport changes.

Using calc()

The calc() function can be used to perform four arithmetic operations on numerical attributes. For example, , , , , or data types.

Here are some examples:

.foo {    width: calc(50vmax + 3rem);    padding: calc(1vw + 1em);    transform: rotate( calc(1turn + 28deg) );    background: hsl(100, calc(3 * 20%), 40%);    font-size: calc(50vw / 3);
}

clac() nesting

calc() functions can be nested. Inside a function, it is treated as a simple bracket expression, as shown in the following example.

.foo {    width: calc( 100% / calc(100px * 2) );
}

The calculated value of the function is as follows:

.foo {    width: calc( 100% / (100px * 2) );
}

Downgrade scheme

clac() has been generally supported.

For browsers that do not support calc(), the entire attribute value expression will be ignored. However, we can use a fixed value as a fallback solution for browsers that do not support calc().

.foo {    width: 90%; 
    width: calc(100% - 50px);
}

vi design http://www.maiqicn.com Office resource website collection https://www.wode007.com

What scenarios can use calc()

Example 1 - Centered elements

Using calc() gives us another solution for vertically centered elements . If we know the dimensions of the element, a typical solution is to use negative margins to move it half the height and width, as shown below:

.foo {    position: absolute
    top: 50%;    left: 50%;    marging-top: -150px;    margin-left: -150px;
}

Using the calc() function, we just pass the top and left attributes The same effect can be achieved:

.foo {    position: absolute
    top: calc(50% - 150px);    left: calc(50% - 150px);
}

With the intervention of Flexbox, this method is rarely needed. However, there are some situations where Flexbox cannot be used. For example, this method is useful if the element needs to be absolutely positioned or fixedly positioned.

Example 2 - Creating root grid dimensions

Using rem, the calc() function can be used to create a viewport-based grid. We can set the font size of the root element to be a fraction of the viewport width.

html {  
    font-size: calc(100vw / 30);
}

Now, 1rem is 1/30 of the viewport width. Any text on the page will automatically scale based on your viewport. Furthermore, viewports of the same proportions will always display the same amount of text, regardless of the viewport's true dimensions.

If we use rem to set the size for non-text, they also obey this behavior. A 1rem-width element is always 1/30 of the width of the viewport element.

Example 3 - Clarity

Finally, calc() makes calculations clearer. If you made a group of items 1/6 the width of their parent element's container, you might write:

.foo {    width: 16.666666667%;
}

However, it can be clearer and more readable:

.foo {    width: calc(100% / 6);
}

Use calc (), we can do more, like create a grid system. It is one of the most useful new features of CSS.

The above is the detailed content of What is the use of css calc(). For more information, please follow other related articles on the PHP Chinese website!