How css uses calc () to do arithmetic

This article mainly shows you "how css uses calc () to do arithmetic". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how css uses calc () to do arithmetic".

Use calc () to do arithmetic

*, but not the least, let's talk about the calc () function. This function allows you to perform simple arithmetic calculations, such as calculating the length and width of elements, eliminating the need for you to write Javascript code that is difficult to maintain. This function supports all simple basic arithmetic operations, including addition, subtraction, multiplication and division.

For example, you want to create an element whose width is full of its parent element, but also set aside some pixel width for other purposes:

.parent {width: 100%; border: solid black 1px; position: relative;} .child {position: absolute; left: 100px; width: calc (90%-100px); background-color: # ff8; text-align: center;} above is all the content of the article "how css uses calc () to do arithmetic". 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!