;
尝试一下 »
定义与用法
calc() 函数用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:
width: calc(100% - 10px)
;
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;
支持版本:CSS3
浏览器支持
表格中的数字表示支持该函数的第一个浏览器版本号。
"webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。
自动调整表单域的大小以适应其容器的大小
calc()
的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘。
以下实例中,form 元素自身使用了窗口可用宽度的 1/6,然后,为了让 form 元素内部的 input 元素保持合适的大小,我们再一次使用了 calc(),让它的宽度为其容器的宽度减 1em。下面的
实例
input
{
padding:
2
px
;
display:
block
;
width:
calc
(
100
%
-
1
em
)
;
#formbox
{
width:
calc
(
100
%
/
6
)
;
border:
1
px
solid
black
;
padding:
4
px
;
尝试一下 »
CSS 函数