码迷,mamicode.com
首页 > 其他好文 > 详细

四则运算 calc()

时间:2015-09-04 14:03:10      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

它的出现还真的蛮令人惊喜的,很适用于百分比宽度。之前我们有box-sizng,而今又多了一个它,并且,calc的实用性更高。我们可以在border、margin、pading、font-size和width等属性上做一些加减乘除,简单拿width举例:

.wrap {
background-color: #dee;
height: 200px;
padding: 40px;
display: inline-block;
width: calc(100% - 2 * 40px);
}

书写注意点:

width: calc(100%-2*40px);//错误的写法

(这是我在测试的时候踩的坑→ →)

运算符前后加一个空格,不然浏览器可能会无法识别哟~~

 

其它貌似也没有什么了,最后看一下兼容性吧,:)

技术分享

 

四则运算 calc()

标签:

原文地址:http://www.cnblogs.com/qianlegeqian/p/4781549.html

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