When browsing this http://www.sitepoint.com station today, because of curiosity looked at the code written by other people, and found this line of code,
so he studied it, calc () literally we can understand him as a function function. In fact, calc is the abbreviation of the English word calculate (calculated), is a new feature css3, used to specify the length of the element. For example, you can use calc () border to the element, margin, pading, font-size, and width and other dynamic value property. Why say it is a dynamic value? Value because the expression we used to get. However calc () biggest advantage is that the fluid used in the layout () can be calculated by element width calc.
What calc () do?
Calc () allows you to do the calculation elements, you can give a div element, using a percentage, em, px, and its value calculating unit rem width or height, for example, "width: calc (50% + 2em)", in this way you do not have to consider the value of the width of the DIV element in the end is how much, and this annoying task handed over to the browser to calculate.
calc () syntax
calc () syntax is very simple, just like we learned a child plus (+), minus (-), multiplication (*), division (/), the use of mathematical expressions to represent:
width: calc(expression);
Wherein "expression" is an expression used to calculate the length of the expression.
calc () operation rules
calc () using common mathematical notation, but also provide a more intelligent functions:
- Use "+", "-", "*" and "/" four operations;
- The percentage may be used, px, em, rem, and other units;
- It can be mixed with various calculation units;
- Expression in the "+" and "-", it must have a space before and after, such as "widht: calc (12% + 5em)" This wording is no space error;
- An expression of "*" and "/", it can be no space before and after, but it is recommended to leave a space.
Browser Compatibility
Let an example, we make a three module side by side, the width of percentage, there is padding value, there border value, and margin-right, and these three values px,
li{
float:left; width:33.3333%; height:50px; padding:10px; margin-right:10px; background:#FF6666; border:5px solid #DAC8A7; }
Renderings:
it is not a good parallel, in which case it is not good to forget, to calculate a bit error out there, is not it? Now we use the calc (),
li{
float:left; //width:33.3333%; height:50px; padding:10px; margin-right:15px; background:#FF6666; border:5px solid #DAC8A7; width:calc(33.3333% - (10px + 5px) * 2 - 15px ) }
Means (width- (padding + border) * 2-margin)
is now a parallel
Well, which come to an envelope, and then a little bit about the optimization of air from the side 15px, so that both sides suffer side. To add margin-right on the parent level: -15px, OK to get,
Now take this response pattern should be very easy to do, and