effect:
The calc() function is used to dynamically calculate the length value
In fact, the form of calc() seems to make people think of functions in Javascript. Of course, it is not a function in js, but it has functions similar to functions and can be used for calculations. An expression in parentheses is usually used calc() to specify the length of the element, whether it is width, height, border or padding, etc. can be specified with him. To put it bluntly, calc() is an attribute of css3 that specifies the length of an element. Its special feature is that it can do calculations and supports the mixed use of various units, such as %, px, em, etc. So this property is especially suitable for those adaptive layouts.
Usage (note):
1. If there are " +" and "-" operators in the operator expression , there must be spaces before and after . For example: width: calc(100% - 10px);
2. Any length value can be calculated using the calc() function;
3. The calc() function supports "+", "-", "*", "/" operations ;
3. The calc() function uses standard mathematical operation priority rules;
example
Example 1: Implementing a centering problem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="center"></div>
</div>
<style>
.parent{
width: 200px;
height: 200px;
background: #f5f5f5;
position: relative;
}
.center{
width: 60px;
height: 60px;
position: absolute;
top:calc(50% - 30px);
left:calc(50% - 30px);
background: pink;
}
</style>
</body>
</html>
Show results:
The position page where the children element is positioned can be controlled by the value of calc, and the children element is centered horizontally and vertically
