About the calc() method in CSS3

This article mainly introduces the calc() method of CSS 3 in detail. It is very good and has reference value. Friends who need it can refer to it.

The following code introduces calc() in CSS3 to you. Method, 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]

As shown in the above code, the preview shows 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 All selection tips: You can modify part of the code first, then press run]

Instructions for use

• Supports: , -, *, /, supports mixed use

• Supports: %, 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)

• There is no need for spaces before and after

  * and /, but it is recommended.
  

Support

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Implementation of @keyframes animation in CSS3

About the method of responsive centered display of CSS banner image

Usage of CSS table-layout attribute

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