CSS3 Calc () feature small Peek

Before we want to achieve a perfect width adaptive input box is a good hassle, once also being a challenge to front-end technology. Similar common scenes also have 100% wide + border containers, and so on. In these situations, we have to be very careful because the performance of each browser may be inconsistent.

Now that Firefox and WebKit Support Calc (), we can also learn.

What does calc () do?

Calc () is the abbreviation for the word calculate (computed), a new length unit function of CSS3, which can be used in simple mathematical operations.

Well, CSS3 more and more advanced.

Operation rules

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

• Use "+" "-" "*" "/" arithmetic;
• Can use the percentage, px, EM, REM and other units;
• You can use a mix of units for calculation.

Instance:

Let's take a look at a few small examples to understand the Calc () function:

1 2 3 4

. box{ border:1px solid #ddd; Width:calc (100%-2px) }

The container width plus the border width is exactly 100%.

1 2 3

. box{ Width:calc (10em+20px) }

width, 10em plus 20px.

1 2 3 4 5 6 7

. box{ margin-left:20px; Width:calc (100%/3-20px); Box:nth-child (3n) { margin-left:0; }

3 column width layout.

Browser support

Firefox 4.0+ has been spending support for Calc (), but to use the-moz-calc () private property, Chrome is also starting to support proprietary-WEBKIT-CALC () from the dev version, IE9 this time, The native support standard is not prefixed with the notation. Opera does not seem to support ~ ~

So if we want to use this attribute, remember to bring the compatibility of each browser.