CSS中的数学表达式calc()浅谈

末蓝、 2024-03-22 20:12 35阅读 0赞

![3361814d410186613e29db39b36e9726.jpeg][]

数学表达式calc()是CSS中的函数，主要用于数学运算。这篇文章给大家介绍了CSS中的数学表达式calc()的相关知识，感兴趣的朋友一起看看吧

数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。本文将介绍calc()的相关内容

**定义**

数学表达式calc()是calculate计算的缩写，它允许使用+、-、\*、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算

兼容性: IE8-、safari5.1-、ios5.1-、android4.3-不支持，android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position

注意：+和-运算符两边一定要有空白符

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>&lt;style&gt;</code> <code>.test</code><code>1</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border</code><code>: calc( </code><code>1px</code> <code>+ </code><code>1px</code> <code>) </code><code>solid</code> <code>black</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/* calc里面的运算遵循*、/优先于+、-的顺序 */</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>: calc(</code><code>100%</code><code>/</code><code>3</code> <code>- </code><code>2</code><code>*</code><code>1em</code> <code>- </code><code>2</code><code>*</code><code>1px</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: pink;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-style</code><code>: toggle(</code><code>italic</code><code>, </code><code>normal</code><code>); </code> <code>}</code> <code>.test</code><code>2</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/* 由于运算符+的左右两侧没有空白符，所以失效 */</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border</code><code>: calc(</code><code>1px</code><code>+</code><code>1px</code><code>) </code><code>solid</code> <code>black</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/* 对于，不能小于0的属性值，当运算结果小于0时，按0处理 */</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>: calc(</code><code>10px</code> <code>- </code><code>20px</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding-left</code><code>: </code><code>10px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: lightblue;</code> <code>}</code> <code>&lt;/style&gt;</code> <code>&lt;div class=</code><code>"test1"</code><code>&gt;测试文字一&lt;/div&gt;&nbsp;&nbsp;&nbsp; </code> <code>&lt;div class=</code><code>"test2"</code><code>&gt;测试文字二&lt;/div&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**应用**

数学表达式calc()常用于布局中的不同单位的数字运算

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>&lt;style&gt;</code> <code>p{ </code><code>margin</code><code>: </code><code>0</code><code>;}</code> <code>.parent{ </code><code>overflow</code><code>: </code><code>hidden</code><code>;zoom: </code><code>1</code><code>;}</code> <code>.</code><code>left</code><code>{ </code><code>float</code><code>: </code><code>left</code><code>;</code><code>width</code><code>: </code><code>100px</code><code>;</code><code>margin-right</code><code>: </code><code>20px</code><code>;}&nbsp;&nbsp;&nbsp; </code> <code>.</code><code>right</code><code>{ </code><code>float</code><code>: </code><code>left</code><code>;</code><code>width</code><code>: calc(</code><code>100%</code> <code>- </code><code>120px</code><code>);}</code> <code>&lt;/style&gt;</code> <code>&lt;div class=</code><code>"parent"</code> <code>style=</code><code>"background-color: lightgrey;"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div class=</code><code>"left"</code> <code>style=</code><code>"background-color: lightblue;"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;</code><code>left</code><code>&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div class=</code><code>"right"</code>&nbsp; <code>style=</code><code>"background-color: lightgreen;"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;</code><code>right</code><code>&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;</code><code>right</code><code>&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/div&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**总结**

以上所述是小编给大家介绍的CSS中的数学表达式calc()，希望对大家有所帮助

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

[3361814d410186613e29db39b36e9726.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/cad2d405d36e4aeb9258b9e2e431030c.png
[Link 1]: https://www.weidianyuedu.com