How to dynamically obtain width and height values through the calc () method of css3

This article mainly shows you "how to get wide and high values dynamically through css3's calc () method". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn "how to get wide and high values dynamically through css3's calc () method".

Compared with the program, the web front-end has almost no logical operation, so that when we do the front-end, sometimes we can reuse something, but we can't reuse it, and we really have to write down the operation.

Can not be reused, and then came out less so that css can define variables, can not be calculated, later, css3 provides the calc () method.

Calc () literally we can take it as a function function. In fact, calc is the abbreviation of the English word calculate (calculation). It is a new feature of css3 to specify the length of an element.

What can calc () do?

Calc () allows you to calculate an element. You can give a div element and calculate its width or height using percentage, em, px, and rem unit values, such as "width:calc (50% + 2em)", so that you don't have to think about the width value of the element DIV and leave the annoying task to the browser.

Calc () syntax

The syntax of calc () is very simple, just as we learned to add (+), subtract (-), multiply (*) and divide (/) when we were young, using mathematical expressions to express:

Width: calc (expression); where "expression" is an expression that calculates the length.

Operation rules of calc ()

Calc () uses general mathematical rules, but also provides smarter functionality:

Use "+", "-", "*" and "/" operations

You can use percentage, px, em, rem, etc.

You can use a mixture of units for calculation.

When there are "+" and "-" in expressions, there must be spaces before and after them. It is wrong to write "widht: calc (12%+5em)" without spaces.

When there are "*" and "/" in the expression, there can be no spaces before and after them, but it is recommended that you leave spaces.

The above is all the contents of the article "how to dynamically obtain wide and high values through css3's calc () method". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!