Calc ()-CSS3 New Properties

<span id="Label3"></p><p><p>Calc () looks like a JS function, but it is actually a property of css3, it can automatically plan width, height, etc.</p></p><p><p>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.</p></p>What can calc () do?<p><p>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.</p></p>Calc () Syntax<p><p>The Calc () syntax is very simple, as we learned to add (+), subtract (-), multiply (*), and (/) as a child, using mathematical expressions to Represent:</p></p><pre><pre>. Elm { Width:calc (expression);}</pre></pre><p><p>Where "expression" is an expression that is used to calculate the length of an Expression.</p></p>Calculation rules for Calc ()<p><p>Calc () uses common mathematical rules, but it also provides more intelligent functionality:</p></p> <ol> <ol> <li>Use "+", "-", "*" and "/" arithmetic;</li> <li>can use percentages, px, em, rem and other units;</li> <li>Can be mixed with various units for calculation;</li> <li>When there are "+" and "-" in the expression, <strong>there must be a space before and after it</strong> , such as "widht:calc (12%+5em)", which is not the correct way to make a blank;</li> <li>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.</li> </ol> </ol>Browser compatibility<p><p>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.</p></p><p><p>You also need to add a browser prefix when you are actually using it.</p></p><pre><pre>. Elm {/*firefox*/-moz-calc (expression);/*chrome safari*/-webkit-calc (expression);/*standard */calc ();}<br>Instance:</pre></pre><pre><pre><span style="color: #0000ff;"><</span><span style="color: #800000;"></span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">= "box"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;"></span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">= " Inner "</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></pre></pre><pre><span style="color: #800000;"><span style="color: #800000;">. Box</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">400px</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Inner</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">padding</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">20px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">1px solid #999</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">90%</span></span>;<span style="color: #008000;"><span style="color: #008000;">/*</span></span><span style="color: #008000;"><span style="color: #008000;">browsers that do not support properties *</span></span><span style="color: #008000;"><span style="color: #008000;">*/</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">-moz-calc (100%-20*2 + 1*2)</span></span>;<span style="color: #008000;"><span style="color: #008000;">/*</span></span><span style="color: #008000;"><span style="color: #008000;">*20 is the padding value, 1 is the value of the border *</span></span><span style="color: #008000;"><span style="color: #008000;">*/</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">-webkit-calc (100%-(+ 1) * 2)</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Calc (100%-(+ 1) * 2);</span></span>}</pre><p><p></p></p><pre><pre><br><br></pre></pre><p><p>Calc ()-CSS3 New Properties</p></p></span>