Use of the Calc () CSS3 case

What is a calc ()? Believe that the CSS3 Study more in-depth children's shoes on the function and use of the functions are more familiar with the new web front-end, this function is still relatively unfamiliar. In fact, Calc () is a new feature of CSS3 that specifies the length of the element, and we can also interpret it as a function of the functions. Today, I would like to share with you the role of CSS3 Calc () and its specific usage.

What can calc () do?

What is the use of Calc () in CSS3? Calc () can not only set dynamic values for elements such as border, margin, pading, font-size, and width, but also calculates the width of the elements in the fluid layout by calc (). For example: With Calc (), 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 don't have to consider how much the element div's width value is, Just give the task to the browser to calculate it.

Calc () syntax

The Calc () syntax is very simple, like plus (+), minus (-), multiply (*), except (/), using mathematical expressions, such as:

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:

Use "+", "-", "*" and "/" arithmetic;

can use percentages, px, EM, REM and other units;

Can be mixed with various units for calculation;

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;

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

Through a concrete example and everyone shows, make a three-column side-by module, width by percentage, with padding value, with border value, and Margin-right, and these three values are px:

li{

Float:left;

width:33.3333%;

height:50px;

padding:10px;

margin-right:10px;

Background: #FF6666;

border:5px solid #DAC8A7;

}

Effects, such as:

, it can be seen that this method, it is not good tie, through the calculation is not good operation, there will always be some errors, this time, you need to 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)

}

Meaning (width-(padding+border) *2-margin)

Now we can do what we need:

The above is the CSS3, Calc () The role and specific usage, in the width calculation to do the response pattern layout, very practical.

Use of the Calc () CSS3 case