Detailed calc () function function

Calc () may be a stranger to everyone, and it's unlikely to believe that Calc () is part of the CSS. Since it looks like a function, why does the function appear in CSS? This also makes me baffled, today a colleague told me that there is a property in CSS3 to achieve adaptive layout, first let me think of is box-sizing, but with me said can also calculate, which let me think of Calc (). Because earlier on the official website and some blog to see the relevant introduction, but has not been in-depth, and did not test themselves. It took me a whole afternoon to study calc () thoroughly today. So we have this blog, I hope to help you.

Usually in the production of the page, always encounter some elements are 100% of the width. As is known to all, if the element width is 100%, it does not have the other box model property set itself OK, if anything else, it will cause the box to burst. For example, there is a border, or margin and padding, which will make your box burst. In other words, if the width of your element is 100%, as long as you add any value to the element, you will burst the element box (in standard mode, in addition to the IE Border,padding,margin mode). This will be quite troublesome, usually we encounter such phenomenon, is also quite cautious, sometimes even can not solve, only by changing the structure to achieve. Even if you do this in a cumbersome way, there is a browser compatibility that results in inconsistent final results. Although the box-sizing in the CSS3 attribute described above solves this problem to some extent, the function of the Calc () function today is easier to achieve.

What is calc ()?

Before Learning Calc (), we need to know what Calc () is. He's the only one who knows what he is. Better use of him in practical use.

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:

. Elm {   

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.

. Elm {/*firefox*/-moz-calc (expression);/*chrome safari*/-webkit-calc (expression);/*standard */calc ();  

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:

<div class= "Demo" >  

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:

. demo {width:300px; background: #60f;}. Box {   

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:

. demo {width:300px; background: #60f;}. box {   width:100%;   Background: #f60;     padding:10px;   border:5px solid Green;

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

padding:3px 0; }. Box {   width:100%;   Background: #f60;   height:50px;   padding:10px;   

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:

width:90%;/* 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, let's take a look at a sample adaptive layout:

The demo above is a very simple and common layout effect, in this layout, I used the adaptive layout. The entire layout contains "head", "Main content", "sidebar" and "Foot", and "main content" left, "sidebar" to the right, detailed structure see the HTML part of the demo.

Next, we'll focus on the CSS section:

1, set a padding in the body, and attach some basic style, you can make different settings according to their own needs, this example code is as follows:

Body {     background: #E8EADD;     Color: #3C323A;     padding:20px;  

2. Set the style of the main container "wrapper"

The width of the main container is "100%-20px * 2" and is centered horizontally:

. wrapper {     width:1024px;/* Fallback for browsers, "T support the Calc () function */     width:-moz-calc (100% -40px);     Width:-webkit-calc (100%-40px);     Width:calc (100%-40px);     Margin:auto;  

A fixed-width value of "1024px" is set for browsers that do not support calc ().

3. Set style for headers and footer

The header and footer in this example are simple, add a padding of 20px to them, others are basic styling, and the corresponding width should be "100%-20px * 2":

#header {     background: #f60;     padding:20px;     Width:984px;/*fallback for browsers that don ' t support the Calc () function*/     width:-moz-calc (100%-40px);     Width:-webkit-calc (100%-40px);     Width:calc (100%-40px); } #footer {     clear:both;     Background: #000;     padding:20px;     Color: #fff;     width:984px;/* Fallback for browsers, T support the Calc () function */     width:-moz-calc (100%-40px);     Width:-webkit-calc (100%-40px);     

4. Set the style for the main content

Set a 8px border to the main content, 20px padding, and floating to the left, and set a right margin "" "px, the key point, our main content occupies 75% of the container width, so that the main content should be" 75%-8px * 2-20px * 2 ":

#main {     border:8px solid #B8C172;     Float:left;     margin-bottom:20px;     margin-right:20px;     padding:20px;     width:704px; /* Fallback for browsers that don ' t support the Calc () function */     width:-moz-calc (75%-20px * 2-8px * 2);     Width:-webkit-calc (75%-20px * 2-8px * 2);     Width:calc (75%-20px * 2-8px * 2);  

4. Set the right column style

To the sidebar set a 25% width, in addition to containing 8px of the border, 10px of the inner distance, there is also the main content 20px to remove, or the whole width and the container will be different 20px, in other words will burst the container fell. So the actual width of the sidebar should be "25%-10px * 2-8px * 2-20px":

#accessory {     border:8px solid #B8C172;     Float:right;     padding:10px;     width:208px; /* Fallback for browsers that don't support the Calc () function */     width:-moz-calc (25%-10px * 2-8px * 2-20px); C5/>width:-webkit-calc (25%-10px * 2-8px * 2-20px);     

As a result, you will see the layout of the demo shown above. After this example of learning, people will feel that using calc () for adaptive layout is super cool AH. At this time there are a lot of students will feel it, bitter force of ie6-8 not support, dare not to use.

Finally, we provide an example of HEIHGT:

After a long time did not write blog, do not know everyone to Calc () whole understand no, if not, continue to write a few examples of it. If you have a better share, remember to tell us yo.

Detailed calc () function function