鸦杀's Blog

四则运算 calc()

2015-12-09

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

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

书写注意点:

width: calc(100%-2*40px);//错误的写法
(这是我在测试的时候踩的坑→ →)

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

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

扫描二维码,分享此文章