A detailed introduction to the new properties of Calc () in CSS3

First, preface

Calc () looks like a function in JavaScript, and in fact it is used in CSS, it can be used to calculate the length (width or height), can automatically adjust the value according to the different size of the screen automatically, making it easy to implement the adaptive layout display in different size screen. The project often encounters elements that are always centered, and of course the first thing to think about is using margin:0 Auto, or using the simple method of positioning and margin, when a colleague tells me to study calc, I really have a deep understanding of what's new in this CSS3.

Ii. Methods of Use

The parameter in calc () is a formula that calculates the width and value of the task by throwing it to a browser of different sizes, so that the page can draw its own conclusions about the width or value, and these formulas are simple plus (+) minus (-) multiplication (*).

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, the plus (+) minus (-) operation requires a space between the number and the operator, and the space cannot be omitted, and the space in the (*) divide (*) operation can be omitted.

The expression in calc () can be calculated using units such as percent, PX, EM, REM, and the units can be mixed together:

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

Third, Calc () nesting

Calc () is a function, so the function can be nested, and the final result can be calculated by different formulas.

p{    --widtha:calc (10px + 190px);    --widthb:calc (Var (--widtha)/2);    --widthc:calc (Var (--WIDTHB)/2);    Width:var (--WIDTHC);//50px}

Four, the simple center

After Calc () can calculate the width, the implementation of the center display can have many methods, padding or margin, but its principle is the same.

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

Assuming the middle content is fixed width 1024px, then get the width of the parent or the width of the window 100%, and then subtract the width of the content of the left is to allocate to the left and right sides of the content of the width, divide them into two (/2) to achieve the middle 1024px width of the content has been centered.

Five, compatibility

The compatibility of Calc () is already high, and ie9+, ff4.0+, Chrome, and safari6+ all already support the application of Calc (), but still have to add a different browser prefix.

div{-moz-calc (expression);    -webkit-calc (expression);　　 Calc (expression); Expression is a calculation formula}