css3 calc()
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 calc()相关的知识,希望对你有一定的参考价值。
概述
CSS函数calc()
可以用在任何一个需要<length>
的地方.有了calc()
,你可以通过计算来决定一个对象的大小和形状.
你还可以在一个calc()内部嵌套另一个
calc()
.
语法
calc(expression)
值
- expression
- 一个数学表达式,该表达式的结果会作为最终的
<length>
.
表达式
该表达式中可以使用下面的几个运算符连接任意的简单表达式:
- +
- 加法
- -
- 减法
- *
- 乘法
- /
- 除法.
表达式中的操作数可以使用任意的长度语法.如果你愿意,你可以在一个表达式中混用多种不同的长度单位.在需要时,你还可以使用小括号来调整计算顺序.
例子
使用指定的外边距定位一个对象
使用calc()可以很容易的为一个对象设置一个左右两边相等的外边距
.在这个例子中,使用CSS创建了一个横跨整个窗口的banner,该banner左右两边各有一个距离窗口边缘40像素的间距:
.banner { position:absolute; left: 40px; width: 90%; /* fallback for browsers without support for calc() */ width: -webkit-calc(100% - 80px); /* WebKit 536.3 (Chrome 19) and above, experimental */ width: calc(100% - 80px); /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */ border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; }
<div class="banner">This is a banner!</div>
自动调整表单域的大小以适应其容器的大小
calc()的另外一个用例是用来确保一个表单域的大小适合当前的可用空间
,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘.
看一下下面的CSS:
input { padding: 2px; display: block; width: 98%; /* fallback for browsers without support for calc() */ width: -webkit-calc(100% - 1em); /* WebKit 536.3 (Chrome 19) and above, experimental */ width: calc(100% - 1em); /* final CSS3 compliant implementation; IE 9 and above */ } #formbox { width: 130px; /* fallback for browsers without support for calc() */ width: -moz-calc(100% / 6); /* Gecko 2.0 (Firefox 4) and above, experimental, will be dropped */ width: -webkit-calc(100% / 6); /* WebKit 536.3 (Chrome 19) and above, experimental */ width: calc(100% / 6); /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */ border: 1px solid black; padding: 4px; }
这个例子中,form元素自身使用了窗口可用宽度的1/6,然后,为了让form元素内部的input元素保持合适的大小,我们再一次使用了calc(),让它的宽度为其容器的宽度减1em
.下面的html使用了上面的CSS:
<form> <div id="formbox"> <label>Type something:</label> <input type="text"> </div> </form>
浏览器兼容性
Feature | android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 4.0 (2) -moz 16.0 (16) | ? | ? | ? |
On gradients‘ color stops | ? | 19.0 (19) | ? | ? | ? |
相关链接
以上是关于css3 calc()的主要内容,如果未能解决你的问题,请参考以下文章