介绍 & lt; style>
.test1 {
,,,边界:,calc (, 1 px +, 1 px ), solid 黑色;
,,,/*,calc里面的运算遵循*,/优先于+,-的顺序,*/,,,宽度:,calc(100%/3,安康;2 * 1 em 作用;2 * 1 px);
background - color,,,:,粉色;
,,,字体样式:,切换(斜体,,正常),,
}
.test2 {
,,,/*,由于运算符+的左右两侧没有空白符,所以失效,*/,,,边界:,calc (1 px + 1 px), solid 黑色;
,,,/*,对于,不能小于0的属性值,当运算结果小于0时,按0处理,*/,,,宽度:,calc (10 px 作用;20 px);
,,,padding-left:, 10 px;
background - color,,,:, lightblue;
}
& lt;/style>
& lt; div 类=皌est1"祝辞测试文字一& lt;/div>,,,,
& lt; div 类=皌est2"祝辞测试文字二& lt;/div> & lt; style>
p{保证金:0;}
.parent{溢出:隐藏;缩放:,1;}
.left{浮动:左;宽度:,100 px; margin-right:, 20 px;},,,,
铃声{浮动:左;宽度:,calc(100%,安康;120 px);}
& lt;/style>
& lt; div 类=皃arent",风格=癰ackground:, lightgrey;“比;
,,,& lt; div 类=發eft",风格=癰ackground:, lightblue;“比;
,,,,,,,& lt; p> left
,,,& lt;/div>
,,,& lt; div 类=皉ight",,风格=癰ackground:, lightgreen;“比;
,,,,,,,& lt; p> right
,,,,,,,& lt; p> right
,,,& lt;/div>
& lt;/div>
小编给大家分享一下CSS中数学表达式calc()的用法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
数学表达式calc()是CSS中的函数,主要用于数学运算。使用钙()为页面元素布局提供了便利和新的思路。
<强>定义
数学表达式calc()是计算计算的缩写,它允许使用+,-,*,/这四种运算符,可以混合使用%,px, em,快速眼动等单位进行计算
兼容性:IE8, safari5.1, ios5.1, android4.3——不支持,android4.4-4.4.4只支持加法和减法.IE9不支持用于backround-position
<强>注意:+和-运算符两边一定要有空白符
实例如下:
应用
数学表达式calc()常用于布局中的不同单位的数字运算
以上是“CSS中数学表达式calc()的用法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
