CSS Tip: Use Calc () to do arithmetic

Let's talk about the Calc () feature. This function allows you to perform simple arithmetic calculations, such as calculating the length of the elements, and eliminates the ability to write JavaScript code that is not easy to maintain. This function supports all simple basic arithmetic operations, including subtraction.

For example, you want to create an element that fills its parent element with its width, but it also leaves a portion of the pixel width for other uses:

. Parent {

width:100%;

Border:solid black 1px;

position:relative;

}

. Child {

;

left:100px;

Width:calc (90%-100px);

Background-color: #ff8;

Text-align:center;

}