cal css,CSS calc计算属性

calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。

calc()语法

.element {

width:calc(expression);

}

calc()的运算法则

使用 "+"、"-"、"*" 和 "/" 运算

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

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

表达式中有 "+" 和 "-" 时,其前后必须有空格。

表达式中有 "*" 和 "/" 时,其前后可以没有空格,但建议保留

浏览器的兼容性

在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持,使用时同样在其前面加上各浏览器厂商的识别符前缀

.element {

-moz-calc(expression);

-webkit-calc(expression);

-o-calc(expression);

-ms-calc(expression);

calc(expression);

}

应用

众所周知,如果元素的宽度为100%时,其自身不带其它盒模型属性设置还好,如果有别的类似margin、padding或border的属性设置,那将导致盒子被撑破。为了解决撑破容器的问题,以前我们只能计算div.box的宽度,用容器的宽度减去padding和border的值 ,但有时候我们苦于不知道元素的总宽度,比如说是自适应布局,只知道一个百分比值,但其它的值又是*px之类的值,这就比较难解决了。随着css3的出现,其中利用box-sizing来改变元素的盒模型以达到最终想要的效果,但是calc()解决此问题更加方便。

body {

background: #E8EADD;

color: #3C323A;

padding: 20px;

}

.wrapper {

width: 1024px;

width: -moz-calc(100% - 40px);

width: -webkit-calc(100% - 40px);

width: calc(100% - 40px);

margin: auto;

}

#header {

background: #f60;

padding: 20px;

width: cal(100% - 20px * 2);

}

#main {

border: 8px solid #B8C172;

float: left;

margin-bottom: 20px;

margin-right: 20px;

padding: 20px;

box-sizing: border-box;

width: 75%;

/*

width: 704px;

width: -moz-calc(75% - 20px * 2 - 8px * 2);

width: -webkit-calc(75% - 20px * 2 - 8px * 2);

width: calc(75% - 20px * 2 - 8px * 2);*/

}

#accessory {

border: 8px solid #B8C172;

float: right;

padding: 10px;

box-sizing: border-box;

width: calc(25% - 20px);

/*

width: 208px;

width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);

width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);

width: calc(25% - 10px * 2 - 8px * 2 - 20px);*/

}

#footer {

clear: both;

background: #000;

padding: 20px;

color: #fff;

width: cal(100% - 20px * 2);

}

test……

test……

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值