Detailed explanation of calc() usage 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. I hope it can help everyone.

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 prompts: You can modify part of the code first, and then press Run]

As shown in the code above, 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 of).

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.

• +, - must have 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.

Related recommendations:

Detailed introduction to the new property calc() in CSS3

Response to calc() in CSS3 Introduction to pattern layout methods

Instructions for using the calc() attribute in CSS3 to express size values ​​​​with calculations

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