CSS3 Example Tutorial: Detailed calc () function function

Article Description: even if you do it through cumbersome methods, there is a compatibility of browsers that results in inconsistent results. Although the box-sizing in the CSS3 attribute described earlier solves this problem to some extent, today's Calc () function functionality makes it easier to achieve the above effect.

Calc () may be unfamiliar to everyone, and is less likely to believe that Calc () is part of the CSS. Because look at its appearance like a function, since is the function why 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 the box-sizing, but I can calculate, which makes me have to think of Calc (). Because earlier in the official website and some blog to see the relevant introduction, but has not been in-depth, nor have they tested. It took me a whole afternoon to completely study calc (). So I have this blog, I hope to help you.

Usually in the production of the page, always encountered some elements are 100% width. As we all know, if the element width is 100%, its own without the other box model property setting is fine, if anything else, that will cause the box to burst. For example, there is a border, or margin and padding, that will make your box burst. In other words, if your element width is 100%, as long as you add border,padding,margin any value in the element, you will break the element box (in standard mode, except IE weird mode). This will be quite troublesome, usually when we encounter such a phenomenon, is also quite cautious, sometimes even can not be solved, only by changing the structure to achieve. Even if you do it through cumbersome methods, there is a compatibility of browsers that results in inconsistent results. Although the box-sizing in the CSS3 attribute described earlier solves this problem to some extent, today's Calc () function functionality makes it easier to achieve the above effect.

What is calc ()?

Before you learn calc (), it's important to know what Calc () is. Only know what he is? Better use of him in practical application.

Calc () Literally we can interpret him as a function of functions. In fact, Calc is an abbreviation for the English word calculate (computed) and is a new feature of CSS3 that specifies the length of an element. For example, you can use Calc () to set dynamic values for attributes such as border, margin, pading, font-size, and width of elements. Why is it a dynamic value? Because we use the expression to get the value. However, the greatest benefit of Calc () is that it is used in the fluid layout, and the width of the element can be computed by calc ().

What can calc () do?

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

Calc () syntax

The Calc () syntax is very simple, like when we were kids learning to add (+), subtract (-), multiply (*), except (/), use mathematical expressions to represent:

. Elm {
  width:calc (expression);
}

where "expression" is an expression used to compute the length of an expression.

Operation rules for Calc ()

Calc () uses common mathematical rules of operation, but also provides more intelligent functionality:

1. Use "+", "-", "*" and "/" arithmetic;
2. Can use the percentage, px, EM, REM and other units;
3. Can be mixed using various units for calculation;
4. Expressions in the "+" and "-", it must have a space before and after, such as "Widht:calc (12%+5em)" This is not a blank writing is wrong;
5. There are "*" and "/" in the expression with no space before and after, but it is recommended to leave a space.

Compatibility of browsers

The browser's compatibility with Calc () is good, in ie9+, ff4.0+, chrome19+, safari6+ are better supported, also need to precede it with the browser manufacturer's identifier, but unfortunately, the mobile end of the browser has not only "Firefox for Android 14.0 "Support, the rest of the annihilated."

You also need to add a browser prefix when you actually use it

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

Through the above understanding, everyone to calc () is not so unfamiliar, but for the actual use may still not understand, then everyone next to work with me, through the example to understand him. First, let's take a look at one of the most common examples:

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

The structure is very simple, is a DIV.DEMO element contains a div.box element, then we step by step to see the changes.

First step: Add a Normal style:

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

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

Step two, add border and padding to the div.box.

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

. demo {
	width:300px;
	Background: #60f;
box {
  width:100%;
  Background: #f60;
  height:50px;
  padding:10px;
  border:5px solid green;

To better illustrate the problem, I added a padding:3px 0 to the Div.demo;

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

This time people do not know can think of the problem will happen? In fact it is very simple, at this time the width of the div.box is greater than the total width of its container div.demo, thus bursting the container out, as shown in the picture:

The third step, the Application of Calc ()

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

Know the total width is 100%, on this basis minus the width of the Boder (5px * 2 = 10px), in the minus padding width (10px * 2 = 20px), namely "100%-(10px + 5px) * 2 = 30px", the resulting value is div. Box's width value:

. demo {
	width:300px;
	Background: #60f;
	padding:3px 0;
}
. box {
	background: #f60;
	height:50px;
	padding:10px;
	border:5px solid Green;
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);
}

This way, after Calc () is computed, the div.box does not exceed the width of its container div.demo, as shown in the figure:

The above is a simple example, and let's look at an example of an adaptive layout together:

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

Next, we'll look at the CSS section:

1, in the body to set an internal distance, and attach some basic style, you can according to their own needs for different settings, this example code as follows:

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

2, set the main container "wrapper" style

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

	. wrapper {
    width:1024px/* Fallback for browsers that Don "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 the style for header and footer

The header and footer in this example are simple enough to add an inner margin of 20px and some 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 that Don "t support the Calc () function/
    width:-moz-calc (100%-40px);
    Width:-webkit-calc (100%-40px);
    Width:calc (100%-40px);
}

4. Set style for main content

Set a 8px border on the main content, 20px, and float to the left, at the same time set a right outside the "px", the key, our main content accounted for 75% of the container width, so that the main content should be the width of "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

The sidebar is set to a width of 25%, in addition to the 8px border, 10px of the inner space, as well as the main content of 20px to be removed, otherwise the entire width and the container will be different 20px, in other words, will burst the container fall. The actual width of the sidebar should therefore 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);
    width:-webkit-calc (25%-10px * 2-8px * 2-20px);
    Width:calc (25%-10px * 2-8px * 2-20px);
}

In this way, you will see the above demo show the layout effect. After this example, you will not feel that using calc () for adaptive layout is super cool. At this time there are a lot of students will feel it, bitter ie6-8 not support, dare not use.

Finally, we provide a heihgt example:

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