在css中使用函数,减少js代码

博主昨天才发现原来css里也是有函数的,【为我以前浪费在写调整样式的js代码上的时间默哀

我现在知道的css函数有这么几个

个人认为里面最实用的就是calc

先举个例子,现在这里有个div,我给了它一个class:youjiecao
为了让大家看见它,我给他加上边框

这里是它的样式

接下来我们就用这个div来实验

首先,当你需要把这个div里的一个div(id=”child1″)左边靠拢,上下贴紧,只有右边留40px的时候怎么做?

如果用js混css,那会是这个样子(这里就不简化代码了)

如果有人问为什么不直接写

那是因为这种写法不知道为什么我个人测试只在webkit核浏览器有效,在其它浏览器里这样写会直接残掉。。

然后我们来看一下纯css的写法

注:100% – 40px中数值和运算符号间必须加空格,否则规则会无效

这么做直接省略了resize,而且少(gen)了(ben)不(bu)少(yong)js代码

下面这个youjiecao的div被强制设定成了90%宽度,里面有刚刚提到的child1,这是用css直接做出来的效果,如果你什么也没看到说明你的浏览器不支持calc函数

民那可以拉动浏览器窗口来看变化,为了民那可以看见child1,我给它加上了背景色

以下是还没实现的方法
将来你想把一个不确定宽度的div做成正方形,而不用js,你或许可以这么写

再说明一遍,这种写法现在似乎还没有浏览器支持

目前我了解的只有calc函数,其他的还没有多做研究,所以在这里就不误导了。





如文中无特殊说明,本站均使用以下协议:知识共享许可协议
知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。