How to use the calc () function in CSS
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!
