Have you ever thought calc () in the end is what? Here you will soon read on to know! It can be used to create a layout in CSS. To do this, you can also use the position property.
Css calc () is used to calculate the internal stylesheet. Function allows the use of a mathematical expression:
addition (+)subtraction (-)multiplication (*)division (/)
Be able to do math in CSS is a very useful feature, especially when creating complex layouts.
Pre-processors have the ability to use mathematical functions, but none like calc () function is powerful. The ability of some pre-processor comprises nested in SASS and LESS.
Use Calc () is the main advantage of the properties of different units can be mixed. For example, you can not be divided by the percentage of the number of units or subtracted from the percentage of pixels.
grammar
Note that the operator must either side space.
Browser support
The best way to check whether the CSS properties supported browser access CanIUse.com. We can see, calc () function has a very good browser support, more than 94%.
Positioning examples
A simple example to illustrate Calc () function is the function div is positioned in the container.
In this example, we will see calc () function how to help us locate the child element relative to the parent element. After that, we can give some style elements and some text formatting.
Example width
Another good example of how to use Calc () function to set the width of the element.
Thus, calc () function is used to define. The second sub-element using a percentage and the pixel unit. This is a good illustration of the ability to mix units of the function.
in conclusion
We hope from this article you learned something new. We've shown you calc () function of the basics, it's time for you to play with up and release its full potential.