![](https://img-blog.csdnimg.cn/img_convert/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
注意:+和-运算符两边一定要有空白符
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style> .test 1 { border : calc( 1px + 1px ) solid black ; /* calc里面的运算遵循*、/优先于+、-的顺序 */ width : calc( 100% / 3 - 2 * 1em - 2 * 1px ); background-color : pink; font-style : toggle( italic , normal ); } .test 2 { /* 由于运算符+的左右两侧没有空白符,所以失效 */ border : calc( 1px + 1px ) solid black ; /* 对于,不能小于0的属性值,当运算结果小于0时,按0处理 */ width : calc( 10px - 20px ); padding-left : 10px ; background-color : lightblue; } </style> <div class= "test1" >测试文字一</div> <div class= "test2" >测试文字二</div> |
应用
数学表达式calc()常用于布局中的不同单位的数字运算
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style> p{ margin : 0 ;} .parent{ overflow : hidden ;zoom: 1 ;} . left { float : left ; width : 100px ; margin-right : 20px ;} . right { float : left ; width : calc( 100% - 120px );} </style> <div class= "parent" style= "background-color: lightgrey;" > <div class= "left" style= "background-color: lightblue;" > <p> left </p> </div> <div class= "right" style= "background-color: lightgreen;" > <p> right </p> <p> right </p> </div> </div> |
总结
以上所述是小编给大家介绍的CSS中的数学表达式calc(),希望对大家有所帮助
转自:微点阅读 https://www.weidianyuedu.com