Css3 calc可使用简单的数学运算计算宽度

calc是单词calculate的缩写,是Css3的一个新的长度单位函数,可以使用简单的数学运算.

Firefox要使用-moz-calc()私有属性,

Chrome要使用-webkit-calc()私有属性,

IE9原生支持标准的不带前缀的写法,

Opera暂还不支持.

运算规则

可以使用 “+” “-” “*” “/” 四则运算(”+”、”-”两个符号边上必须要有空格,而”*”、”/”符号则不是必须的),

可以使用百分比、px、em、rem等单位,

可以混合使用各种单位进行计算.

 1 .content {
 2     border:1px solid #000;
 3     /* ‘+’ ‘-’ 符号左右两边加空格 */
 4     width:calc(100% - 2px);
 5 }
 6 
 7 .content2 {
 8     /* ‘+’ ‘-’ 符号左右两边加空格 */
 9     width:calc(10em + 10px);
10 }
11 
12 /*三栏等宽布局*/
13 .content3 {
14     margin-left:20px;
15     /* ‘+’ ‘-’ 符号左右两边加空格, ‘*’ ‘/’ 符号可不加 */
16     width:calc(100%/3 - 20px);
17 }
18 /* n为从0开始的乘数,依次递增1,如:3*0,3*1,3*2等相乘结果后的子元素 */
19 .content3:nth-child(3n){
20     margin-left:0;
21 }

此函数在低端浏览器中无法计算,现在支持的浏览器不是很多.

 

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。