New Css3 attributes: calc () and css3 attributes calc

New Css3 attributes: calc () and css3 attributes calc

I. Preface

Calc () Looks like a function in javascript, but in fact it is used in Css and can be used to calculate the length (width or height ), it can automatically adjust the value based on the screen of different sizes, so that the Adaptive Layout can be easily displayed under screens of different sizes. Elements that need to be centered are often encountered in the project. Of course, the first one that comes to mind is to use margin: 0 auto; or a simple method that combines positioning with margin, when my colleagues told me to let me study calc, I really got to know something new in Css3.

 

Ii. Usage

The parameters in calc () are a calculation formula. The calculation formula is used to throw the task of calculating the width and value to a browser of different sizes so that the page can draw its own width or value conclusion, these formulas are also simple addition (+) subtraction (-) multiplication (*) Division (/) operations.

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

From the above example, we can see that there is a space between the value to be calculated in the plus (+) minus (-) operation and the operator, and this space cannot be omitted, spaces in multiplication (*) Division (/) operations can be omitted.

The expressions in calc () can be calculated using percentages, px, em, rem, and other units, and the units can be calculated together:

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

 

Iii. calc () nesting

Calc () is a function, so the function can support nesting. different formulas can be used to calculate the final result.

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

 

4. Simple Center

After calc () can calculate the width, there are many ways to implement the center display, such as padding or margin, but their principles are the same.

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

If the content in the middle is fixed with a width of 100% PX, the width of the parent class or the window is. After the width of the content is subtracted, the remaining width must be allocated to the left and right sides of the content, split them into two parts (/2) so that the content of the 1024px width in the middle is always centered.

 

V. Compatibility

The compatibility of calc () is very high. IE9 +, FF4.0 +, Chrome and Safari6 + all support calc () applications, but they must be prefixed with different browsers.

Div {-moz-calc (expression);-webkit-calc (expression );
// Expression is the calculation formula}