Shulou(Shulou.com)06/01 Report--

This article will explain in detail what is the use of the calc () function in css3. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

What is calc () in css3? What can I do?

Calc () literally we can think of it as a function function. In fact, calc is the abbreviation of the English word calculate (calculation); it is a new function of css3, which can be used to specify the length of elements and dynamically calculate the length value. (recommended study: CSS3 manual)

In CSS3, the calc () function allows us to perform mathematical operations on attribute values.

For example, we can use the calc () function to specify that the width value is the result of the addition of two or more values, rather than declaring the element width value as a static pixel value.

.demo {

Width:calc (100px+50px)

}

Why use calc ()?

If you have ever used a css preprocessor like sass, you may encounter the following example:

.demo {

Width:100px+50px

}

/ / use SASS variable

$width-one:100px

$width-two:50px

.bar {

Width:$width-one+$width-two

}

However, the calc () function provides a good solution, and it has two benefits. First of all, we can combine different units. Specifically, we can use a mixture of units for calculation, such as percentage, px, em, rem, and so on. For example, we can create an expression that subtracts the pixel value from the percentage value.

.demo {

Width:calc (100%-50px)

}

In this example, the width of the .demo element is always less than 100% of its parent width.

Second, after using calc (), the calculated value is the expression itself, not the resulting value of the expression. In this way, when the mathematical expression is executed using the css preprocessor, the value given to the browser is the result of the expression.

/ / specify a value in SCSS

.demo {

Width:100px+50px

}

/ / CSS compiled in the browser and its calculated value

.demo {

Width:150px

}

Using the calc () function, the value parsed by the browser is the actual calc () expression.

/ / specify a value in CSS

.demo {

Width:calc (100%-50px)

}

/ / calculated value of the browser

.demo {

Width:calc (100%-50px)

}

This means that the values in the browser can be more dynamic and can change as the view changes. We can have an element (value: view height minus absolute value) that changes as the view changes.

The use of the calc () function

The calc () function can use numeric attribute values to perform addition, subtraction, multiplication, and division. Specifically, it can be used in data types such as, etc.

Here are some examples:

.demo {

Width:calc (50vmax+3rem)

Padding:calc (1vw+1em)

Transform:rotate (calc (1turn+28deg))

Background:hsl (100th calc (320,40)

Font-size:calc (50vw/3)

}

Note:

When using "+" and "-", there must be spaces before and after them. It is wrong to write "widht:calc (12%+5em)" without spaces.

When using "*" and "/", there can be no spaces before and after them, but it is recommended that you leave spaces.

Calc () nested use

The calc () function can be used nested. However, the inner function will be treated as a simple parenthetical expression. For example, the following nested expression:

.demo {

Width:calc (100%/calc (100px*2))

}

Equivalent to:

.demo {

Width:calc (100% / (100px*2))

}

Let's look at the use of the calc () function through a simple example

Example: centered element (assuming that the height and width of the .demo box are both 300px)

.demo {

Position:absolute

Top:calc (50%-150px)

Left:calc (50%-150px)

}

This is equivalent to:

.demo {

Position:absolute

Top:50%

Left:50%

Marging-top:-150px

Margin-left:-150px

}

Compatibility of calc () function

1.jpg

You can see that the browser's support for the calc () function is good.

For unsupported browsers, the calc () function ignores the entire expression. This means that we will have to provide a static value for unsupported browsers.

.demo {

Width:90%;/* does not support browser setting static value * /

Width:calc (100%-50px)

}

This is the end of the article on "what is the use of the calc () function in css3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.