博主昨天才发现原来css里也是有函数的,【为我以前浪费在写调整样式的js代码上的时间默哀
喵
我现在知道的css函数有这么几个
attr() calc() /*opera不支持*/ counter() cycle() /*支持情况不明*/ max() /*支持情况不明*/ min() /*支持情况不明*/
个人认为里面最实用的就是calc
先举个例子,现在这里有个div,我给了它一个class:youjiecao
为了让大家看见它,我给他加上边框
这里是它的样式
.youjiecao{ position:relative; width:400px; height:200px; border:1px solid #777; }
接下来我们就用这个div来实验
首先,当你需要把这个div里的一个div(id=”child1″)左边靠拢,上下贴紧,只有右边留40px的时候怎么做?
如果用js混css,那会是这个样子(这里就不简化代码了)
css: #child1{ position:absolute; top:0; left:0; height:100%; } javascript: /*一般情况下都是父元素会改变大小才会有这种需求,所以用到onresize*/ window.onresize=function(){ document.getElementById("child1").style.width=document.getElementById("child1").parentNode.offsetWidth-40; } /*另外还要给宽度初始化一下我就不写了*/
如果有人问为什么不直接写
#child1{ position:absolute; top:0; left:0; right:40px;/*直接设置右边40px*/ height:100%; }
那是因为这种写法不知道为什么我个人测试只在webkit核浏览器有效,在其它浏览器里这样写会直接残掉。。
然后我们来看一下纯css的写法
#child1{ position:absolute; top:0; left:0; width:calc(100% - 40px);/*使用css函数来设置宽度*/ height:100%; }
注:100% – 40px中数值和运算符号间必须加空格,否则规则会无效
这么做直接省略了resize,而且少(gen)了(ben)不(bu)少(yong)js代码
下面这个youjiecao的div被强制设定成了90%宽度,里面有刚刚提到的child1,这是用css直接做出来的效果,如果你什么也没看到说明你的浏览器不支持calc函数
民那可以拉动浏览器窗口来看变化,为了民那可以看见child1,我给它加上了背景色
以下是还没实现的方法
将来你想把一个不确定宽度的div做成正方形,而不用js,你或许可以这么写
再说明一遍,这种写法现在似乎还没有浏览器支持
目前我了解的只有calc函数,其他的还没有多做研究,所以在这里就不误导了。
本文发布于 https://luojia.me
本站文章未经文下加注授权不得拷贝发布。