calc是单词calculate的缩写,是Css3的一个新的长度单位函数,可以使用简单的数学运算.Firefox要使用-moz-calc()私有属性,Chrome要使用-webkit-calc()私有属性,IE9原生支持标准的不带前缀的写法,Opera暂还不支持.运算规则可以使用 ...
calc是单词calculate的缩写,是Css3的一个新的长度单位函数,可以使用简单的数学运算.
Firefox要使用-moz-calc()私有属性,
Chrome要使用-webkit-calc()私有属性,
IE9原生支持标准的不带前缀的写法,
Opera暂还不支持.
运算规则
可以使用 “+” “-” “*” “/” 四则运算(”+”、”-”两个符号边上必须要有空格,而”*”、”/”符号则不是必须的),
可以使用百分比、px、em、rem等单位,
可以混合使用各种单位进行计算.
.content { border:1px solid #000; /* ‘+’ ‘-’ 符号左右两边加空格 */ width:calc(100% - 2px);}.content2 { /* ‘+’ ‘-’ 符号左右两边加空格 */ width:calc(10em + 10px);}/*三栏等宽布局*/.content3 { margin-left:20px; /* ‘+’ ‘-’ 符号左右两边加空格, ‘*’ ‘/’ 符号可不加 */ width:calc(100%/3 - 20px);}/* n为从0开始的乘数,依次递增1,如:3*0,3*1,3*2等相乘结果后的子元素 */.content3:nth-child(3n){ margin-left:0;}
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:Css3 calc可使用简单的数学运算计算宽度
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。