本文摘自PHP中文网,作者青灯夜游,侵删。

【推荐教程:CSS视频教程 】
数学表达式calc()是CSS中的函数,主要用于数学运算。使用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 ;
width : calc( 100% / 3 - 2 * 1em - 2 * 1px );
background-color : pink;
font-style : toggle( italic , normal );
}
.test 2 {
border : calc( 1px + 1px ) solid black ;
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()的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css怎么给按钮加上超链接
css实现三角的原理
css如何改变图片颜色
css文件中引用图片不显示怎么办
一招搞定css不规则边框
css中如何定义使用变量
如何使用css制作箭头符号
css border-bottom-color属性怎么用
css如何取消下划线
css中的&是什么意思
更多相关阅读请进入《calc()》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 深入浅析CSS中的数学表达式calc()