What is calc() in CSS3? How to use calc()?

Many people don’t know what calc() is, so let’s learn calc() today. Before learning, we must first know what calc() is? Only if you know what he is? Only in practical applications can we use it better. Then the next step will be around calc().

What is calc()?

calc() Literally we can understand it as a function function. In fact, calc is the abbreviation of the English word calculate. It is a new function of CSS3 and is used to specify the length of elements. For example, you can use calc() to set dynamic values ​​for the border, margin, padding, font-size, and width properties of an element. Why is it called a dynamic value? Because we use expressions to get the value. However, the biggest benefit of calc() is that it can be used in fluid layout. The width of the element can be calculated through calc().

What can calc() do?

calc() allows you to calculate the width or height of a div element using percentage, em, px and rem unit values, such as "width: calc(50% 2em)", so that you don't have to consider the width value of the element DIV, and leave this annoying task to the browser to calculate.

calc() syntax

calc() syntax is very simple, just like when we were young, we learned to add ( ), subtract (-), multiply (*), and divide ( /), use mathematical expressions to express:

.elm {
  width: calc(expression);
}

where "expression" is an expression used to calculate the length.

Operation rules of calc()

calc() uses general mathematical operation rules, but also provides smarter functions:
1. Use " " , "-", "*" and "/" four arithmetic operations;
2. Units such as percentage, px, em, rem, etc. can be used;
3. Various units can be mixed for calculation;
4 , when there are " " and "-" in the expression, there must be spaces before and after them. For example, "widht: calc(12% 5em)" is wrong to write without spaces;
5. There are For "*" and "/", there may be no spaces before and after them, but it is recommended to leave spaces.

Browser compatibility

The browser's compatibility with calc() is pretty good, and it is better in IE9, FF4.0, Chrome19, and Safari6 To support it, you also need to add the identifier of each browser manufacturer in front of it, but unfortunately, mobile browsers do not yet have "firefox for android 14.0" support, and the rest are completely wiped out.

In actual use, you also need to add the browser prefix

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

It is worth noting that in the calc function, a space must be reserved on both sides of the operator, otherwise the function will report an error .

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