Calc of CSS ();

About Calc () This CSS function, has too much effect, I believe that the friends of the CSS familiar with the function will not be unfamiliar, if you belong to this category, then you can skip, because this article is not very important, just a few basic introduction to it.

Well, how did I get into this property, it must have been a problem at the time, and then discovered that there was this method. See:

So because to achieve this effect, open really use this CSS function, or you have to use JS to do, it is too troublesome. (If this example is a bit farfetched will be on it), so I and Calc () so in the vast sea of yards meet met.

Calc () is a <length>,<frequency>,<angle>,<time>,<number> or <integer> that can be used anywhere; As long as the numerical calculations involved are possible.

This function supports subtraction arithmetic, but there are a few things we have to pay attention to:

1 0 still can't do divisor

2 Calc (100%-5px) when using the Add and subtract operation; Note that there must be a space on either side of the "-", otherwise it will not work, because if no space is considered a percent sign and a negative number, instead of "-" as a minus

3 units different can not be computed calc (100px-3s), which is also not possible. Just like you take the area to reduce the volume, do not know what is a.

There is, of course, an example of setting a sub-container centered and always maintaining a margin of 50px to the left and right of the parent container. The size of the parent container can become.

. Container{width:100%;Height:200px;background:Yellow;}. Box{width:-moz-calc (100%-100px);width:-webkit-calc (100%-100px);width:Calc (100%-100px);Height:100px;background:Red;margin:0 Auto;}

        <class= "container">            <class = "box" ></ Div >            </ Div >

Figure:

In fact, the use is relatively simple, the main or use the scene is not good to grasp it!

Finally, reference materials are attached:

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

http://tympanus.net/codrops/css_reference/calc/

Calc of CSS ();