"Turn" CSS3 Calc () use--fine-shrink version

Problem: When making a page, there will always be a 100% width of the elements encountered. If the element width is 100%, as long as the element is added Border,padding,margin any value, will be the element box burst (standard mode, except IE weird mode). Although the box-sizing in the CSS3 attribute solves this problem to some extent, the Calc () function function achieves the above effect more easily.

What is calc ()?

Calc () Literally we can 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

The browser to calc () compatibility is good, in ie9+, ff4.0+, chrome19+, safari6+ are better supported, the same needs to be preceded by the browser manufacturer's identifier, but unfortunately, the mobile browser has not only "Firefox for Android 14.0 "Support, others are annihilated.

You also need to add a browser prefix when you are actually using it.

{    /*Firefox*    /-moz-calc (expression    ); /* Chrome Safari */     -webkit-calc (expression);     /* */    }

Through the above understanding, everyone on the Calc () is not so strange, but the actual use may still not understand, then we will follow up with me, through an example to understand him. First, let's look at one of the most common examples:

<class= "Demo">     <class= " Box "></div></div>    

The structure above is simple, that is, a DIV.DEMO element contains a div.box element, then we take a step-by-step look at the changes.

First step: Add a Normal style:

{    width: 300px;     background: #60f;}  {  width: 100%;     Background: #f60;     height: 50px;}

The effect is simply that div.box completely obscures the Div.demo, as shown in:

Second step, add border and padding on the Div.box

This is a tricky thing to do, add 10px of padding to the Div.box, and add 5px of border:

{    width: 300px;     background: #60f;}  {  width: 100%;   Background: #f60;   height: 50px;   padding: 10px;   Border: 5px solid green;}

In order to better explain the problem, I added a padding:3px 0 on the Div.demo;

{    width: 300px;     background: #60f; padding: 3px 0;    }  {  width: 100%;   Background: #f60;   height: 50px;   padding: 10px;   Border: 5px solid green;}

At this time, we don't know if we can think of the problem. In fact, it is very simple, this time the width of the div.box is greater than the total width of its container div.demo, thus bursting the container out,:

The third step, the use of Calc ()

To solve the problem of bursting the container, Before we can only calculate the width of the div.box, with the container width minus the value of padding and border, but sometimes, we do not know the total width of the element, such as adaptive layout, only know a hundred points, but other values are PX and other values, this is the difficulty, dead stuck. With the advent of CSS3, which uses box-sizing to change the box model of the elements of the actual implementation of the effect, but today we learn the Calc () method is more convenient.

Know the total width is 100%, on this basis minus the width of the Boder (5px * 2 = 10px), minus the width of padding (10px * 2 = 20px), namely "100%-(10px + 5px) * 2 = 30px", the final value is the Div. The Width value of box:

. Demo{width:300px;background:#60f;padding:3px 0;}. Box{background:#f60;Height:50px;padding:10px;Border:5px Solid Green;width:90%;/*addressed to browsers that do not support calc ()*/width:-moz-calc (100%-(10px + 5px) * 2);width:-webkit-calc (100%-(10px + 5px) * 2);width:Calc (100%-(10px + 5px) * 2);}

In this way, the Div.box does not exceed the width of its container div.demo after calculation by calc ():

The above is a simple example of how to use Calc ().

Transferred from: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

"Turn" CSS3 Calc () use--fine-shrink version