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

Xiaobian to share with you how to use the calc() function in CSS, I believe most people still do not know how to, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

First let's see how to use the calc() function.

We use the calc function to set the size by specifying a calculation formula, such as:

width:calc(100px+50px);

or

font-size:calc(3em+1em);

Let's look at a concrete example

code is as follows

Create calc.html and write the following HTML file

Use of Calc

body{

width:800px;

}

.calc_div{

width:calc(100%-500px);

height:calc(100%-500px);

color:rgb(255,0,0);

}

.font{

font-size:3em;

}

.calc_font{

font-size:calc(3em+2em);

color:rgb(255,0,0);

}

This is a div without calc.

This is a div that uses calc.

This is a div with 3em set.

This is a div with calc(3em+2em) set

That's all for "How to use calc() function in CSS", thanks for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

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.