css之calc();
2016-03-30 20:52
495 查看
关于calc()这个css函数,有太大的作用了,相信熟悉css的朋友们,对这个函数都不会陌生,如果你属于这一类,那么你可以跳过了,因为这篇也没什么很重要的,只是对它的一些基本的介绍。
好了我是怎么开始接触到这个属性的呢,一定是当时遇到了什么问题,然后才发现了有这种方法。见下图:
那么由于要实现这种效果,开就真的用到这个css函数了,不然就得用js来做了,就太麻烦了。(如果这个例子有点牵强将将就一下吧),于是我与calc()就这样在茫茫码海中见面相遇了。
calc()是可以在任何地方使用的<length>,<frequency>,<angle>,<time>,<number>或<integer>,只要涉及数值计算都是可以的。
这个函数支持 加减乘除四则运算,但是有几点我们必须要注意:
1 0 依然不能做除数
2 在用加减运算时calc(100% - 5px);注意在"-"的两边都必须要有一个空格,不然会没有作用,因为如果没有空格会被看成一个百分号的数和一个负数,而不会把“-”看成减号
3 单位不同的也不能进行计算 calc(100px - 3s),这也是不行的。就好比你拿面积去减体积一样,不知是个啥。
当然这里还有一个例子,那就是设置一个子容器居中,且始终与父容器左右各保持50px的margin值。父容器的大小是可以变得。
图:
其实用法还是比较简单的,主要还是运用场景不好把握吧!
最后附上参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
http://tympanus.net/codrops/css_reference/calc/
好了我是怎么开始接触到这个属性的呢,一定是当时遇到了什么问题,然后才发现了有这种方法。见下图:
那么由于要实现这种效果,开就真的用到这个css函数了,不然就得用js来做了,就太麻烦了。(如果这个例子有点牵强将将就一下吧),于是我与calc()就这样在茫茫码海中见面相遇了。
calc()是可以在任何地方使用的<length>,<frequency>,<angle>,<time>,<number>或<integer>,只要涉及数值计算都是可以的。
这个函数支持 加减乘除四则运算,但是有几点我们必须要注意:
1 0 依然不能做除数
2 在用加减运算时calc(100% - 5px);注意在"-"的两边都必须要有一个空格,不然会没有作用,因为如果没有空格会被看成一个百分号的数和一个负数,而不会把“-”看成减号
3 单位不同的也不能进行计算 calc(100px - 3s),这也是不行的。就好比你拿面积去减体积一样,不知是个啥。
当然这里还有一个例子,那就是设置一个子容器居中,且始终与父容器左右各保持50px的margin值。父容器的大小是可以变得。
.container{width: 100%;height: 200px;background: yellow;} .box{width: -moz-calc(100% - 100px); width:-webkit-calc(100% - 100px); width:calc(100% - 100px); height: 100px;background: red;margin: 0 auto;}
<div class="container"> <div class="box"></div> </div>
图:
其实用法还是比较简单的,主要还是运用场景不好把握吧!
最后附上参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
http://tympanus.net/codrops/css_reference/calc/
相关文章推荐
- css如何控制div完全居中
- css 只改变父元素的透明度,不改变子元素透明度rgba+opacity
- HTML+CSS基础篇——小技巧集合
- HTML+CSS基础篇(四)——编码规范
- css3 字体旋转
- CSS中的浮动深入学习
- CSS基础
- 关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js
- CSS垂直居中的几种方法
- 关于用css3 还是img
- CSS3:clip-path具体解释
- HTML标签CSS默认值研究
- CSS Overflow:hidden
- CSS核心内容定位和浮动
- Css旋转
- CSS文字控制之letter-spacing和word-spacing
- css中li、a、span行内强制不换行
- 使用CSS实现空心的向上向下的箭头
- CSS3系列:魔法系列
- CSS——line-height行高设置垂直居中