您现在的位置:首页 >> 前端 >> 内容

CSS之calc()语法实例、calc()注意事项

时间:2017/11/14 14:47:51 点击:

  核心提示:大家在写代码遇到要计算宽度、高度时一定很烦躁吧,每次都要去计算,但是CSS有一个强大的东西能够帮助我们做一个懒人,那就是calc()函数。- calc()语法:calc(expression).tes...

大家在写代码遇到要计算宽度、高度时一定很烦躁吧,每次都要去计算,但是CSS有一个强大的东西能够帮助我们做一个”懒人“,那就是calc()函数。

- calc()语法:

calc(expression)

.test{
    width:-webkit-calc(100% - 100px);
    margin:0 auto;
}

Hello World!

在上面这个简单的例子中,我们可以得到的结果是p位于浏览器中央(这得益于margin:0 auto;),宽度为浏览器宽度减去100px,这就是calc()的作用,这样设置的好处就是会根据当前浏览器的宽度自动减去100px,这样我们就不用去花太多的心思去计算到底应该应什么样的宽度。

看上述代码会发现-webkit-calc(),这是针对不同的浏览器要使用不同的写法

chrome : -webkit-calc(expression) Firefox : -moz-calc(expression) 通用 : calc(expression)

-calc()注意事项:

记得第一次写calc()的时候好像不起作用,当时检查了很多遍感觉都是对的,但是就是没有效果,所以很是郁闷,后来发现就是一个空格的问题,所以大家在用calc的时候一定要注意下面的情况:

加号和减号运算符之间必须用空格分隔;
 clac(100% - 100px)
函数名和括号之间不可有空格;
 calc (100% - 100px)

也就是说,calc函数是提供基础运算的函数,我们在这上面可以做很多事情。

Tags:CS SS S之 之C 
作者:网络 来源:kesilll的博客