How to use the calc() method of CSS3

This time I will show you how to use the calc() method of CSS3. What are the precautions when using the calc() method of CSS3? The following is a practical case, let’s take a look. take a look.

The following code introduces you to the calc() method in css3. The specific content is as follows:

<p style="width:100px; height:50px; background:red;">
  <p style="width:100%; height:20px; margin:5px; background:green;"></p>
</p>

[Ctrl+A All selection tips: You can modify part of the code first, and then press Run]

The above code, you can see in the preview that the red box is exceeded, because in standard CSS, width does not include margin (width in old IE does include margin).

In order to achieve the above effect, we usually put another layer of p in the middle (some people say, can’t we just remove width: 100%? Calm down, we are giving an example. In fact, in some cases, it cannot be Cancel width: 100%. )

Is there anything more convenient? Use calc() instead.

<p style="width:100px; height:50px; background:red;">
  <p style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></p>
</p>

[Ctrl+A Select all tips: You can modify part of the code first, then press Run]

Instructions for use

• Support: +, -, *, /, support mixed use

• Support: %, px, em, rem, etc.

##+, - There must be spaces before and after. For example: calc(100%-10px) is incorrect and should be changed to: calc(100% - 10px)
*, / before and after are not required. spaces, but it is recommended.

Support

All mainstream desktop browsers support it. It is said that mobile browsers hardly support it.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use redrawing and reflow

How to use CSS settings to record user passwords

The above is the detailed content of How to use the calc() method of CSS3. For more information, please follow other related articles on the PHP Chinese website!