Shulou(Shulou.com)06/01 Report--

Editor to share with you what the calc () method can do. I hope you will get something after reading this article. Let's discuss it together.

To create a beautiful CSS adaptive layout, the first step is to allocate size space for everything in the Web application. A high feature requires the ability to specify dimensions using a mixture of length units.

For example, how can 50% of the area be retained, plus a fixed amount of space (such as 10px)?

In the past, we needed to set up very complex css styles to achieve the above effect, but now we can easily do this using the calc () attribute.

Moreover, we can use the calc () attribute anywhere we use length or numbers, such as using calc () to locate things or set rgb () color values, so it has many good uses in stylesheets.

Let's take a look at how the new property calc () of css3 implements flexible layout.

What can calc () do?

The calc () attribute can be used anywhere in the stylesheet where the CSS length or number is located. Specifically about the use of calc (), in the previous article [how to use calc? There is a detailed introduction. You can refer to it if you need it.

The calc () function provides two main functions to make the layout more flexible: mixed percentages and absolute values, and the use of mixed units.

Mix percentages with absolute units

Let's look at an example of mixing percentages in absolute units. Suppose we want to allocate 50% of the available area minus a fixed number of pixels, then we can write:

.demo {

Width:400px

/ * height:200px;*/

Border:1pxsolid#000

Margin:100pxauto

}

.cx {

Width:calc (100%-100px)

Background-color:palevioletred

}

This is a test text, and the background color is always 100 pixels smaller than 50% of the total area.

After reading this article, I believe you have a certain understanding of "what can be done by calc () method". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.