Detailed introduction to the new property calc() in CSS3

1. Preface

calc() looks like a function in javascript, but in fact it is used in In Css, you can use it to calculate the length (width or height), and can automatically adjust the values ​​​​according to different screen sizes, making it easy to realize adaptive layout display on different screen sizes. In projects, we often encounter elements that need to be always centered. Of course, the first thing that comes to mind is to use margin: 0 auto; or use a simple method that combines positioning and margin. When my colleagues told me to do it, It was only when I studied calc that I really understood this new thing in CSS3.

2. How to use

The parameter in calc() is a calculation formula. Through this calculation formula, the task of calculating width and value is thrown to different sizes. The browser allows the page to draw conclusions about the width or value by itself. These calculation formulas are also very simple addition (+) subtraction (-) multiplication (*) division (/) operations.

p{
    width: calc(15px + 15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px}

As can be seen from the above example, there is a space between the value to be calculated in the addition (+) subtraction (-) operation and the operator, and this space is It cannot be omitted, but the spaces in the multiplication ( * ) and division ( / ) operations can be omitted.

The expression in calc() can be calculated using units such as percentage, px, em, rem, etc., and the units can be mixed together for calculation:

p{
    width: calc(3em + 5px);//53px}

3. Nesting of calc()

calc() is a function, so the function can support nesting, and the final result can be calculated through different formulas.

p{
    --widthA: calc(10px + 190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}

4. Simple centering

After calc() can calculate the width, there are many ways to implement centered display, padding or margin, but its principle is the same.

p{
    padding: 0 calc((100% - 1024px)/2);
}

Assuming that the middle content has a fixed width of 1024px, then get the width of the parent or the width of the window 100%, and then subtract the width of the content. What is left is the width that needs to be allocated to the left and right sides of the content. By dividing them into two (/2), the content with a width of 1024px in the middle can be always centered.

5. Compatibility

The compatibility of calc() is already very high. IE9+, FF4.0+, Chrome and Safari6+ already support calc() application, but still need to add the prefix for different browsers.

div{
    -moz-calc(expression);
    -webkit-calc(expression);
    calc(expression);
　　 //expression为计算公式}

The above is the detailed content of Detailed introduction to the new property calc() in CSS3. For more information, please follow other related articles on the PHP Chinese website!