Detailed explanation of calc() usage in CSS3-CSS Tutorial-php.cn

Detailed explanation of calc() usage in CSS3

小云云

Release： 2018-01-15 09:51:34

Original

2704 people have browsed it

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>

Copy after login

[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>

Copy after login

[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)
* 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!