码迷,mamicode.com
首页 > Web开发 > 详细

css3-calc

时间:2016-01-18 10:29:36      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

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

Opera暂还不支持.

运算规则

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;
}

css3-calc

标签:

原文地址:http://www.cnblogs.com/zandy/p/5138312.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!