CSS3 using Calc () to do arithmetic (turn)

Calc is an abbreviation for the English word Calculate (calculation) and is a new feature of CSS3 that specifies the length of the element. This function allows you to perform simple arithmetic calculations, such as calculating the length and width of an element, eliminating the JavaScript code you write that is not easy to maintain. This function supports all simple basic arithmetic operations, including subtraction.

When there are "+" and "-" in the expression, there must be a space before and after it, such as "Widht:calc (12%+5em)" is not a blank notation is wrong, there are "*" and "/" in the expression, there can be no space before and after it, but it is recommended to leave a space. The browser to calc () compatibility is good, in ie9+, ff4.0+, chrome19+, safari6+ are better supported, the same need to be preceded by the browser manufacturer's identifier, but unfortunately, the mobile browser is mostly not supported, currently only " Firefox for Android 14.0 "support.

For example, you want to create an element that fills its parent element, but leaves a portion of the pixel wide for other uses:

{     width: 100%;       Border: solid black 1px;      position: relative;} {position: absolute;               left: 100px;       width: calc (90%-100px);     background-color: #ff8;       text-align: Center;  

Pretty, isn't it? For more detailed information, please refer to the CSS Calc specification.

It is more and more clear that CSS has matured into some ways to replace JavaScript, greatly simplifying the work of web developers. If you don't start taking advantage of these features, that's just being silly.

CSS3 using Calc () to do arithmetic (turn)