Prior to calc () contact rarely, rarely used, but later found that real contact, this use is not small.
Definition and Usage
1.calc () function is used to dynamically calculate the length value.
2. It is noted that, before and after the operator needs to leave a space, for example: width: Calc (100% - 10px);
3. Any length values may be used Calc () function is calculated;
4.calc () function supported "+", "-", "*", "/" operation;
5.calc (using standard mathematical function precedence rules);
1.calc () function is used to dynamically calculate the length value.
Usually Calc () to specify the length of the element, may be width, height, border padding or the like. Plainly, Calc () is a property of the specified length css3 element, which is special in that it can be calculated, and support a mix of various units, such as%, px, em like. So this property is particularly suitable for those adaptive layout.
.content {
min-height: calc(100vh - 128px);
}
.item {
width: calc(100% - 28px);
}
Compatibility: In IE9 +, FF4.0 +, Chrome19 +, Safari6 + have been better supported.
2. It is noted that, before and after the operator needs to leave a space, for example: width: calc (100% - 10px);
specifically stated : expression of "+", "-" operator, the front and rear must be spaces, such as "width: calc (100% - 20px)" the wording; As for the "*", "/" and no such requirement, but in order before and after the style of unity, but also recommended spaces.
3. Any length values may be used Calc () function is calculated;
usually Calc () to specify the length of the element, may be width, height, border padding or the like.
4.calc () function supports "+", "-", "*", "/" operation;
specifically stated : expression of "+", "-" operator, must have a space before and after, e.g. " width: calc (100% - 20px ) " the wording; and for *" / "no such requirement, but in order before and after the style of unity, but also recommended spaces.
5.calc () function mathematical operation priority rules using the standard;
