CSS3中的calc()
2015-07-09 17:00
501 查看
什么是calc()?
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能;MDN的解释为可以用在任何长度,数值,时间,角度,频率等处;
/* property: calc(expression) */ width: calc(100% - 80px);
可以用 + - * / 符号来进行运算;
但需要注意的是 + - 必须用空格隔开;
width: calc(100% -8px); /* 这样会出错,结果为0 */
width: calc(100% - 8px); /* 当 + - 符号用空格隔开时,运算成功 */
使用 * / 运算符时,必须保证有一个值为数值类型;
如果运算出错,结果为0;
浏览器支持程度:
IE9+,FF4.0+,Chrome19+,Safari6+;一些小例子:
还可以组合使用
也可以使用括号来提升运算优先级
calc()还是比较用的,比如说想居中一个绝对定位的元素,一般都是left:50%;top:50%;但是那样真的是居中吗?这种方式没有将元素的宽高计算在内.运用calc()可以实现之前要用js实现的居中
下边为部分参考资料:
https://developer.mozilla.org/en/docs/Web/CSS/calc
/article/1214819.html
相关文章推荐
- css 水平居中 垂直居中方法
- css3质感分析(5)径向渐变叠加纹理(圆心可变)
- LESS CSS 框架简介
- css3流动布局
- 如何去掉IE文本框后的那个X css代码
- Button改变样式
- CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
- 在CSS中,BOX的Padding属性的数值赋予顺序为
- CSS中id和class的区别
- wpf Combobox没有黑三角,鼠标移上去改变样式
- Web前端从入门到精通-5 css简介——css概述和选择器
- CSS word-spacing 属性
- css3选择器
- css3-制作渐变
- css3-变形transforms
- css3-过渡transtition
- css自定义字体(图标)-有些图标不要在P图了
- css3实现网页平滑过渡效果
- 纯CSS绘制mac代码
- css3使用transform属性制作js弹性运动