Using CSS3 's calc () width calculation to make a response pattern layout

Browsing this http://www.sitepoint.com station today, because of curiosity to read the code written by others, the results found this line of code,

So I studied, calc () literally, we could interpret him as a function. In fact, Calc is the abbreviation for the English word Calculate (calculation), is a new function of CSS3, which is used to specify the length of the element. For example, you can use Calc () to set dynamic values for attributes such as border, margin, pading, font-size, and width for an element. Why is it a dynamic value? Because we use the expression to get the value. The biggest benefit of Calc (), however, is that the width of the element can be calculated from Calc () using the fluid layout.

What can calc () do?
Calc () allows you to calculate the elements, you can give a DIV element, using percentages, EM, px and REM unit values to calculate its width or height, such as "Width:calc (50% + 2em)", so you do not have to consider the element div width value is exactly how much, And this annoying task to the browser to calculate.

Calc () syntax
The Calc () syntax is very simple, as we learned to add (+), subtract (-), multiply (*), and (/) as a child, using mathematical expressions to represent:

Width: calc(expression);    

where "expression" is an expression that is used to calculate the length of an expression.

Calculation rules for Calc ()
Calc () uses common mathematical rules, but it also provides more intelligent functionality:

1. Use "+", "-", "*" and "/" arithmetic;
2. can use percentages, px, EM, REM and other units;
3. Can be mixed with various units for calculation;
4. When there are "+" and "-" in the expression, there must be a space before and after it, such as "Widht:calc (12%+5em)", which is not the correct way to make a blank;
5. When there are "*" and "/" in an expression, there can be no spaces before or after it, but it is recommended that you leave a space.

Browser compatibility

Let's take an example, we make a three-column side-by-block module with a width by percentage, a padding value, a border value, and a margin-right, and these three values are PX,

li{float: left;:33.3333%; Height:50px; Padding:10px; Margin-right:10px;< Span class= "PLN" >background: #FF6666; :5px solid  #DAC8A7;                /span>                

：

It is not a good tie, in this case it is not good, even if the figure out there is a bit of error, is not it? Now we're going to use Calc (),

Li{Float:Left;width:33.3333%;Height:50px;Padding:10px;Margin-Right:15px;background: #FF6666; :5px solid  #DAC8A7; :calc (33.3333%< Span class= "PLN" > -  (10px  + 5px)  * 2 -15px ) }      

Meaning (width-(padding+border) *2-margin)
Now you can side it.

Well, to this will sue a network, and then slightly optimize the left and right side of the 15px space, so that both sides of the edge. Just add a margin-right:-15px,ok to the parent.

Now it should be convenient to take this as a response mode.

There is also a foreigner written by the specific how to do everyone interested can understand http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout

Using CSS3 's calc () width calculation to make a response pattern layout