width: calc ( 100 % - 100 px ) ; border: 1 px solid black ; background-color: yellow ; padding: 5 px ; text-align: center ;
尝试一下 »

定义与用法

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 函数 CSS 函数